angularjs-color-picker - npm Package Compare versions

Comparing version 2.5.0 to 2.6.0

bower.json

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

CHANGELOG.md

 # Changelog
 
+## v2.6.0
+
+#### Breaking Changes
+  * None
+
+#### New Features
+  * New saturation and lightness options
+
+#### Bug Fixes
+  * Bug #120 - Set $touched on blur
+  * Fixing up color calculation in the differences between square and round
+
 ## v2.5.0
@@ -9,3 +21,3 @@
 #### New Features
-  *  Improvement #116 Allow access to $scope
+  * Improvement #116 Allow access to $scope
 
@@ -90,3 +102,3 @@ #### Bug Fixes
 #### Bug Fixes
-  *  Bug #102 non assign error if options was set in html
+  * Bug #102 non assign error if options was set in html
 
@@ -93,0 +105,0 @@ ## v2.4.1

dist/angularjs-color-picker.js

 /*!
- * angularjs-color-picker v2.5.0
+ * angularjs-color-picker v2.6.0
  * https://github.com/ruhley/angular-color-picker/
@@ -7,3 +7,3 @@ *
  *
- * 2016-09-28 08:11:52
+ * 2016-11-09 08:24:31
  *
@@ -172,10 +172,17 @@ */
                 if (color.isValid()) {
-                    var hsl = color.toHsv();
+                    var hsl;
 
+                    if (this.options.round) {
+                        hsl = color.toHsl();
+                        this.lightness = Math.round(hsl.l * 100);
+                    } else {
+                        hsl = color.toHsv();
+                        this.lightness = Math.round(hsl.v * 100);
+                    }
+
+                    this.hue = Math.round(hsl.h);
+                    this.saturation = Math.round(hsl.s * 100);
+
                     this.updateModel = false;
 
-                    this.hue = hsl.h;
-                    this.saturation = hsl.s * 100;
-                    this.lightness = hsl.v * 100;
-
                     if (this.options.alpha) {
@@ -250,3 +257,2 @@ this.opacity = hsl.a * 100;
                 if (!_this3.options.inline && (_this3.visible || _this3.$element[0].querySelector('.color-picker-panel').offsetParent !== null)) {
-
                     _this3.visible = false;
@@ -395,2 +401,10 @@ _this3.$scope.$applyAsync();
 
+            // saturation click
+            this.find('.color-picker-saturation').on('click', this.onSaturationClick.bind(this));
+            this.find('.color-picker-saturation').on('touchend', this.onSaturationClick.bind(this));
+
+            // lightness click
+            this.find('.color-picker-lightness').on('click', this.onLightnessClick.bind(this));
+            this.find('.color-picker-lightness').on('touchend', this.onLightnessClick.bind(this));
+
             // opacity click
@@ -415,2 +429,10 @@ this.find('.color-picker-opacity').on('click', this.onOpacityClick.bind(this));
                     this.$scope.$apply();
+                    // mouse event on saturation slider
+                } else if (event.target.classList.contains('color-picker-saturation') || event.target.parentNode.classList.contains('color-picker-saturation')) {
+                    this.saturationDown(event);
+                    this.$scope.$apply();
+                    // mouse event on lightness slider
+                } else if (event.target.classList.contains('color-picker-lightness') || event.target.parentNode.classList.contains('color-picker-lightness')) {
+                    this.lightnessDown(event);
+                    this.$scope.$apply();
                     // mouse event on opacity slider
@@ -441,2 +463,12 @@ } else if (event.target.classList.contains('color-picker-opacity') || event.target.parentNode.classList.contains('color-picker-opacity')) {
                 this.onChange(event);
+                // mouse event on saturation slider
+            } else if (this.saturationMouse && this.has_moused_moved) {
+                this.saturationUp(event);
+                this.$scope.$apply();
+                this.onChange(event);
+                // mouse event on lightness slider
+            } else if (this.lightnessMouse && this.has_moused_moved) {
+                this.lightnessUp(event);
+                this.$scope.$apply();
+                this.onChange(event);
                 // mouse event on opacity slider
@@ -462,2 +494,12 @@ } else if (this.opacityMouse && this.has_moused_moved) {
                 this.$scope.$apply();
+                // mouse event on saturation slider
+            } else if (this.saturationMouse) {
+                this.has_moused_moved = true;
+                this.saturationChange(event);
+                this.$scope.$apply();
+                // mouse event on lightness slider
+            } else if (this.lightnessMouse) {
+                this.has_moused_moved = true;
+                this.lightnessChange(event);
+                this.$scope.$apply();
                 // mouse event on opacity slider
@@ -499,2 +541,22 @@ } else if (this.opacityMouse) {
     }, {
+        key: 'onSaturationClick',
+        value: function onSaturationClick(event) {
+            if (!this.options.disabled && !this.has_moused_moved) {
+                this.saturationChange(event);
+                this.saturationUp(event);
+                this.$scope.$apply();
+                this.onChange(event);
+            }
+        }
+    }, {
+        key: 'onLightnessClick',
+        value: function onLightnessClick(event) {
+            if (!this.options.disabled && !this.has_moused_moved) {
+                this.lightnessChange(event);
+                this.lightnessUp(event);
+                this.$scope.$apply();
+                this.onChange(event);
+            }
+        }
+    }, {
         key: 'onOpacityClick',
@@ -527,4 +589,10 @@ value: function onOpacityClick(event) {
 
+            this.$scope.control[0].$setTouched();
+
             this.eventApiDispatch('onBlur', [event]);
-            this.api.close(event);
+
+            // if clicking outside the color picker
+            if (this.find(event.relatedTarget).length === 0) {
+                this.api.close(event);
+            }
         }
@@ -544,3 +612,9 @@ }, {
                 this.options.hue = false;
+            } else {
+                this.options.saturation = false;
             }
+
+            if (this.options.inline) {
+                this.options.close.show = false;
+            }
         }
@@ -572,5 +646,10 @@ }, {
 
-            var color = tinycolor({ h: this.hue, s: this.saturation / 100, v: this.lightness / 100 }),
-                colorString;
+            var color;
 
+            if (this.options.round) {
+                color = tinycolor({ h: this.hue, s: this.saturation, l: this.lightness });
+            } else {
+                color = tinycolor({ h: this.hue, s: this.saturation, v: this.lightness });
+            }
+
             if (this.options.alpha) {
@@ -581,3 +660,7 @@ color.setAlpha(this.opacity / 100);
             this.swatchColor = color.toHslString();
+            this.updateSaturationBackground(color);
+            this.updateLightnessBackground(color);
 
+            var colorString;
+
             switch (this.options.format) {
@@ -643,13 +726,25 @@ case 'rgb':
     }, {
-        key: 'opacityPosUpdate',
-        value: function opacityPosUpdate() {
+        key: 'saturationPosUpdate',
+        value: function saturationPosUpdate() {
             var _this6 = this;
 
             this.$timeout(function () {
-                var container = _this6.$element[0].querySelector('.color-picker-opacity');
-                var el = angular.element(_this6.$element[0].querySelector('.color-picker-opacity .color-picker-slider'));
-                var bounding = container.getBoundingClientRect();
+                var container, el, bounding;
 
+                if (!_this6.options.round) {
+                    container = _this6.$element[0].querySelector('.color-picker-grid');
+                    el = angular.element(_this6.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                    bounding = container.getBoundingClientRect();
+
+                    el.css({
+                        'left': bounding.width * _this6.saturationPos / 100 + 'px'
+                    });
+                }
+
+                container = _this6.$element[0].querySelector('.color-picker-saturation');
+                el = angular.element(_this6.$element[0].querySelector('.color-picker-saturation .color-picker-slider'));
+                bounding = container.getBoundingClientRect();
+
                 el.css({
-                    'top': bounding.height * _this6.opacityPos / 100 + 'px'
+                    'top': bounding.height * (100 - _this6.saturationPos) / 100 + 'px'
                 });
@@ -664,7 +759,9 @@ });
             this.$timeout(function () {
-                var container = _this7.$element[0].querySelector('.color-picker-grid');
-                var el = angular.element(_this7.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
-                var bounding = container.getBoundingClientRect();
+                var container, el, bounding;
 
                 if (!_this7.options.round) {
+                    container = _this7.$element[0].querySelector('.color-picker-grid');
+                    el = angular.element(_this7.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                    bounding = container.getBoundingClientRect();
+
                     el.css({
@@ -674,24 +771,25 @@ 'top': bounding.height * _this7.lightnessPos / 100 + 'px'
                 }
+
+                container = _this7.$element[0].querySelector('.color-picker-lightness');
+                el = angular.element(_this7.$element[0].querySelector('.color-picker-lightness .color-picker-slider'));
+                bounding = container.getBoundingClientRect();
+
+                el.css({
+                    'top': bounding.height * _this7.lightnessPos / 100 + 'px'
+                });
             });
         }
     }, {
-        key: 'saturationPosUpdate',
-        value: function saturationPosUpdate() {
+        key: 'opacityPosUpdate',
+        value: function opacityPosUpdate() {
             var _this8 = this;
 
             this.$timeout(function () {
-                var container = _this8.$element[0].querySelector('.color-picker-grid');
-                var el = angular.element(_this8.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                var container = _this8.$element[0].querySelector('.color-picker-opacity');
+                var el = angular.element(_this8.$element[0].querySelector('.color-picker-opacity .color-picker-slider'));
                 var bounding = container.getBoundingClientRect();
 
-                if (_this8.options.round) {
-                    el.css({
-                        left: bounding.width * _this8.xPos / 100 + 'px',
-                        top: bounding.height * _this8.yPos / 100 + 'px'
-                    });
-                } else {
-                    el.css({
-                        'left': bounding.width * _this8.saturationPos / 100 + 'px'
-                    });
-                }
+                el.css({
+                    'top': bounding.height * _this8.opacityPos / 100 + 'px'
+                });
             });
@@ -738,3 +836,3 @@ }
 
-            this.hue = (1 - (eventPos.pageY - this.offset(el).top) / el.prop('offsetHeight')) * 360;
+            this.hue = Math.round((1 - (eventPos.pageY - this.offset(el).top) / el.prop('offsetHeight')) * 360);
 
@@ -760,4 +858,10 @@ if (this.hue > 360) {
 
+                if (this.options.round) {
+                    this.getRoundPos();
+                    this.updateRoundPos();
+                } else {
+                    this.gridUpdate();
+                }
+
                 this.huePosUpdate();
-                this.gridUpdate();
                 this.update();
@@ -768,2 +872,149 @@ }
         //---------------------------
+        // saturation functions
+        //---------------------------
+
+    }, {
+        key: 'saturationDown',
+        value: function saturationDown(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            this.saturationMouse = true;
+        }
+    }, {
+        key: 'saturationUp',
+        value: function saturationUp(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            this.saturationMouse = false;
+        }
+    }, {
+        key: 'saturationChange',
+        value: function saturationChange(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            var el = this.find('.color-picker-saturation');
+            var eventPos = this.getEventPos(event);
+
+            this.saturation = Math.round((1 - (eventPos.pageY - this.offset(el).top) / el.prop('offsetHeight')) * 100);
+
+            if (this.saturation > 100) {
+                this.saturation = 100;
+            } else if (this.saturation < 0) {
+                this.saturation = 0;
+            }
+        }
+    }, {
+        key: 'saturationUpdate',
+        value: function saturationUpdate() {
+            if (this.saturation !== undefined) {
+                if (this.options.round) {
+                    this.getRoundPos();
+                    this.updateRoundPos();
+                }
+
+                this.saturationPos = this.saturation;
+
+                if (this.saturationPos < 0) {
+                    this.saturationPos = 0;
+                } else if (this.saturationPos > 100) {
+                    this.saturationPos = 100;
+                }
+
+                this.saturationPosUpdate();
+                this.update();
+            }
+        }
+    }, {
+        key: 'updateSaturationBackground',
+        value: function updateSaturationBackground(color) {
+            var el = this.find('.color-picker-saturation');
+            var saturated = color.clone().saturate(100);
+            var desaturated = color.clone().desaturate(100);
+
+            el.css({
+                'background': 'linear-gradient(to bottom, ' + saturated.toHexString() + ' 0%, ' + desaturated.toHexString() + ' 100%)'
+            });
+        }
+    }, {
+        key: 'updateLightnessBackground',
+        value: function updateLightnessBackground(color) {
+            var el = this.find('.color-picker-lightness');
+
+            if (this.options.round) {
+                var hsl = color.toHsl();
+                hsl.l = 50;
+                hsl = tinycolor(hsl);
+
+                el.css({
+                    'background': 'linear-gradient(to bottom, #FFFFFF 0%, ' + hsl.toHexString() + ' 50%, #000000 100%)'
+                });
+            } else {
+                var hsv = color.toHsv();
+                hsv.v = 100;
+                hsv = tinycolor(hsv);
+
+                el.css({
+                    'background': 'linear-gradient(to bottom, ' + hsv.toHexString() + ' 0%, #000000 100%)'
+                });
+            }
+        }
+
+        //---------------------------
+        // lightness functions
+        //---------------------------
+
+    }, {
+        key: 'lightnessDown',
+        value: function lightnessDown(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            this.lightnessMouse = true;
+        }
+    }, {
+        key: 'lightnessUp',
+        value: function lightnessUp(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            this.lightnessMouse = false;
+        }
+    }, {
+        key: 'lightnessChange',
+        value: function lightnessChange(event) {
+            event.stopPropagation();
+            event.preventDefault();
+
+            var el = this.find('.color-picker-lightness');
+            var eventPos = this.getEventPos(event);
+
+            this.lightness = Math.round((1 - (eventPos.pageY - this.offset(el).top) / el.prop('offsetHeight')) * 100);
+
+            if (this.lightness > 100) {
+                this.lightness = 100;
+            } else if (this.lightness < 0) {
+                this.lightness = 0;
+            }
+        }
+    }, {
+        key: 'lightnessUpdate',
+        value: function lightnessUpdate() {
+            if (this.lightness !== undefined) {
+                this.lightnessPos = 100 - this.lightness;
+
+                if (this.lightnessPos < 0) {
+                    this.lightnessPos = 0;
+                } else if (this.lightnessPos > 100) {
+                    this.lightnessPos = 100;
+                }
+
+                this.lightnessPosUpdate();
+                this.update();
+            }
+        }
+
+        //---------------------------
         // opacity functions
@@ -856,12 +1107,18 @@ //---------------------------
 
-                var tmpSaturation = Math.sqrt(dx * dx + dy * dy);
                 var tmpHue = Math.atan2(dy, dx);
+                var degHue = Math.round(tmpHue * 57.29577951308233); // rad to deg
+                if (degHue < 0) {
+                    degHue += 360;
+                }
+                this.hue = degHue;
 
-                this.saturation = 100 * tmpSaturation;
-                var degHue = tmpHue * 57.29577951308233; // rad to deg
-                if (degHue < 0.0) {
-                    degHue += 360.0;
+                var tmpSaturation = Math.sqrt(dx * dx + dy * dy);
+
+                if (tmpSaturation > 1) {
+                    tmpSaturation = 1;
+                } else if (tmpSaturation < 0) {
+                    tmpSaturation = 0;
                 }
-                this.hue = degHue;
-                this.lightness = 100;
+
+                this.saturation = tmpSaturation * 100;
             } else {
@@ -884,63 +1141,43 @@ this.saturation = (eventPos.pageX - offset.left) / el.prop('offsetWidth') * 100;
         }
-    }, {
-        key: 'saturationUpdate',
-        value: function saturationUpdate(oldValue) {
-            if (this.saturation !== undefined) {
-                if (this.options.round) {
-                    var angle = this.hue * 0.01745329251994; // deg to rad
-                    var px = Math.cos(angle) * this.saturation;
-                    var py = -Math.sin(angle) * this.saturation;
 
-                    this.xPos = (px + 100.0) * 0.5;
-                    this.yPos = (py + 100.0) * 0.5;
+        //---------------------------
+        // helper functions
+        //---------------------------
 
-                    // because we are using percentages this can be half of 100%
-                    var center = 50;
-                    // distance of pointer from the center of the circle
-                    var distance = Math.pow(center - this.xPos, 2) + Math.pow(center - this.yPos, 2);
-                    // distance of edge of circle from the center of the circle
-                    var radius = Math.pow(center, 2);
+    }, {
+        key: 'getRoundPos',
+        value: function getRoundPos() {
+            var angle = this.hue * 0.01745329251994; // deg to rad
+            var px = Math.cos(angle) * this.saturation;
+            var py = -Math.sin(angle) * this.saturation;
 
-                    // if not inside the circle
-                    if (distance > radius) {
-                        var rads = Math.atan2(this.yPos - center, this.xPos - center);
+            this.xPos = (px + 100.0) * 0.5;
+            this.yPos = (py + 100.0) * 0.5;
 
-                        this.xPos = Math.cos(rads) * center + center;
-                        this.yPos = Math.sin(rads) * center + center;
-                    }
-                } else {
-                    this.saturationPos = this.saturation / 100 * 100;
+            // because it are using percentages this can be half of 100%
+            var center = 50;
+            // distance of pointer from the center of the circle
+            var distance = Math.pow(center - this.xPos, 2) + Math.pow(center - this.yPos, 2);
+            // distance of edge of circle from the center of the circle
+            var radius = Math.pow(center, 2);
 
-                    if (this.saturationPos < 0) {
-                        this.saturationPos = 0;
-                    } else if (this.saturationPos > 100) {
-                        this.saturationPos = 100;
-                    }
-                }
-
-                this.saturationPosUpdate();
-                this.update();
+            // if not inside the circle
+            if (distance > radius) {
+                var rads = Math.atan2(this.yPos - center, this.xPos - center);
+                this.xPos = Math.cos(rads) * center + center;
+                this.yPos = Math.sin(rads) * center + center;
             }
         }
     }, {
-        key: 'lightnessUpdate',
-        value: function lightnessUpdate() {
-            if (this.lightness !== undefined) {
-                this.lightnessPos = (1 - this.lightness / 100) * 100;
+        key: 'updateRoundPos',
+        value: function updateRoundPos() {
+            var container = this.$element[0].querySelector('.color-picker-grid');
+            var el = angular.element(this.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
+            var bounding = container.getBoundingClientRect();
 
-                if (this.lightnessPos < 0) {
-                    this.lightnessPos = 0;
-                } else if (this.lightnessPos > 100) {
-                    this.lightnessPos = 100;
-                }
-
-                this.lightnessPosUpdate();
-                this.update();
-            }
+            el.css({
+                left: bounding.width * this.xPos / 100 + 'px',
+                top: bounding.height * this.yPos / 100 + 'px'
+            });
         }
-
-        //---------------------------
-        // helper functions
-        //---------------------------
-
     }, {
@@ -1070,3 +1307,3 @@ key: 'getEventPos',
 function template($templateCache) {
-    $templateCache.put('template/color-picker/directive.html', '<div class="color-picker-wrapper" ng-class="{' + '\'color-picker-disabled\': AngularColorPickerController.options.disabled,' + '\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,' + '}">' + '   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '       <input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required">' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '   </div>' + '   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{' + '       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',' + '       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',' + '       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',' + '       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',' + '       \'color-picker-panel-round\': AngularColorPickerController.options.round,' + '       \'color-picker-show-hue\': AngularColorPickerController.options.hue,' + '       \'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',' + '       \'color-picker-show-inline\': AngularColorPickerController.options.inline,' + '   }">' + '       <div class="color-picker-grid-wrapper">' + '           <div class="color-picker-row">' + '               <div class="color-picker-grid color-picker-sprite">' + '                   <div class="color-picker-grid-inner"></div>' + '                   <div class="color-picker-picker">' + '                       <div></div>' + '                   </div>' + '               </div>' + '               <div class="color-picker-hue color-picker-sprite" ng-show="AngularColorPickerController.options.hue">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '               <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '           </div>' + '       </div>' + '       <div class="color-picker-actions">' + '           <button ' + '               class="color-picker-action color-picker-action-clear"' + '               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 ' + '               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' + '               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>');
+    $templateCache.put('template/color-picker/directive.html', '<div class="color-picker-wrapper" ng-class="{' + '\'color-picker-disabled\': AngularColorPickerController.options.disabled,' + '\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,' + '}">' + '   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '       <input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required">' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '   </div>' + '   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{' + '       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',' + '       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',' + '       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',' + '       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',' + '       \'color-picker-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 color-picker-sprite">' + '                   <div class="color-picker-grid-inner"></div>' + '                   <div class="color-picker-picker">' + '                       <div></div>' + '                   </div>' + '               </div>' + '               <div class="color-picker-hue color-picker-sprite" ng-show="AngularColorPickerController.options.hue">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '               <div class="color-picker-saturation" ng-show="AngularColorPickerController.options.saturation">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '               <div class="color-picker-lightness" ng-show="AngularColorPickerController.options.lightness">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '               <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '           </div>' + '       </div>' + '       <div class="color-picker-actions">' + '           <button ' + '               class="color-picker-action color-picker-action-clear"' + '               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 ' + '               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' + '               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>');
 }
@@ -1083,2 +1320,4 @@
         hue: true,
+        saturation: false,
+        lightness: false,
         alpha: true,
@@ -1085,0 +1324,0 @@ round: false,

dist/angularjs-color-picker.min.js

 /*!
- * angularjs-color-picker v2.5.0
+ * angularjs-color-picker v2.6.0
  * https://github.com/ruhley/angular-color-picker/
@@ -7,5 +7,5 @@ *
  *
- * 2016-09-28 08:11:52
+ * 2016-11-09 08:24:31
  *
  */
-!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,e,i){o.control=i,o.init()}}}function e(o){o.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\'color-picker-disabled\': AngularColorPickerController.options.disabled,\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,}">   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>       <input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required">       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>   </div>   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',       \'color-picker-panel-round\': AngularColorPickerController.options.round,       \'color-picker-show-hue\': AngularColorPickerController.options.hue,       \'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',       \'color-picker-show-inline\': AngularColorPickerController.options.inline,   }">       <div class="color-picker-grid-wrapper">           <div class="color-picker-row">               <div class="color-picker-grid color-picker-sprite">                   <div class="color-picker-grid-inner"></div>                   <div class="color-picker-picker">                       <div></div>                   </div>               </div>               <div class="color-picker-hue color-picker-sprite" ng-show="AngularColorPickerController.options.hue">                   <div class="color-picker-slider"></div>               </div>               <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">                   <div class="color-picker-slider"></div>               </div>           </div>       </div>       <div class="color-picker-actions">           <button                class="color-picker-action color-picker-action-clear"               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                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               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 i="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 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,i,n,r){s(this,t),this.$scope=o,this.$element=e,this.$document=i,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}return n(t,[{key:"watchNgModel",value:function(t,e){var i=this;if(!this.colorMouse)if(void 0===t||void 0===e||this.hasOwnProperty("initialNgModel")||(this.initialNgModel=t),this.hasOwnProperty("initialNgModel")&&(t===this.initialNgModel?"function"==typeof this.$scope.control[0].$setPristine&&this.$scope.control[0].$setPristine():"function"==typeof this.$scope.control[0].$setDirty&&this.$scope.control[0].$setDirty()),void 0!==t&&null!==t&&t.length>4){var s=o(t);if(s.isValid()){var n=s.toHsv();this.updateModel=!1,this.hue=n.h,this.saturation=100*n.s,this.lightness=100*n.v,this.options.alpha&&(this.opacity=100*n.a),this.$timeout(function(){i.updateModel=!0}),this.isValid=!0}else this.isValid=!1;this.$scope.control[0].$setValidity(this.$element.attr("name"),this.isValid)}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.visible||(o.visible=!0,o.hueMouse=!1,o.opacityMouse=!1,o.colorMouse=!1,o.hueUpdate(),o.saturationUpdate(),o.lightnessUpdate(),o.opacityUpdate(),void o.eventApiDispatch("onOpen",[t]))},this.api.close=function(t){o.options.inline||!o.visible&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.visible=!1,o.$scope.$applyAsync(),o.eventApiDispatch("onClose",[t]))},this.api.clear=function(t){""!==o.ngModel&&(o.ngModel="",o.eventApiDispatch("onClear",[t]))},this.api.reset=function(t){o.ngModel!==o.initialNgModel&&(o.ngModel=o.initialNgModel,o.eventApiDispatch("onReset",[t]))},this.api.getElement=function(){return o.$element},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(){var o=this;this.chrome=Boolean(window.chrome);var t=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=t&&t.length>1?parseFloat(t[1]):NaN;var e={mouseDown:this.onMouseDown.bind(this),mouseUp:this.onMouseUp.bind(this),mouseMove:this.onMouseMove.bind(this),keyUp:this.onKeyUp.bind(this)};this.updateModel=!0,this.$scope.$watch("AngularColorPickerController.ngModel",this.watchNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.options.swatchPos",this.watchSwatchPos.bind(this)),this.$scope.$watchGroup(["AngularColorPickerController.options.format","AngularColorPickerController.options.alpha","AngularColorPickerController.options.case"],this.reInitAndUpdate.bind(this)),this.$scope.$watchGroup(["AngularColorPickerController.options.disabled","AngularColorPickerController.options.swatchBootstrap","AngularColorPickerController.options.swatchOnly","AngularColorPickerController.options.swatch","AngularColorPickerController.options.pos","AngularColorPickerController.options.inline","AngularColorPickerController.options.placeholder","AngularColorPickerController.options.round"],this.reInit.bind(this)),this.$scope.$watch("AngularColorPickerController.api",this.setupApi.bind(this)),this.$scope.$watch("AngularColorPickerController.swatchColor",this.updateSwatchBackground.bind(this)),this.$scope.$watch("AngularColorPickerController.hue",this.hueUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.saturation",this.saturationUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.lightness",this.lightnessUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.opacity",this.opacityUpdate.bind(this)),this.$scope.$on("$destroy",function(){o.$document.off("mousedown",e.mouseDown),o.$document.off("mouseup",e.mouseUp),o.$document.off("mousemove",e.mouseMove),o.$document.off("touchstart",e.mouseDown),o.$document.off("touchend",e.mouseUp),o.$document.off("touchmove",e.mouseMove),o.$document.off("keyup",e.keyUp),o.eventApiDispatch("onDestroy")}),this.initConfig(),this.$document.on("mousedown",e.mouseDown),this.$document.on("mouseup",e.mouseUp),this.$document.on("mousemove",e.mouseMove),this.$document.on("touchstart",e.mouseDown),this.$document.on("touchend",e.mouseUp),this.$document.on("touchmove",e.mouseMove),this.$document.on("keyup",e.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-opacity").on("click",this.onOpacityClick.bind(this)),this.find(".color-picker-opacity").on("touchend",this.onOpacityClick.bind(this))}},{key:"onMouseDown",value:function(o){this.has_moused_moved=!1,!this.options.disabled&&this.find(o.target).length>0&&(o.target.classList.contains("color-picker-grid-inner")||o.target.classList.contains("color-picker-picker")||o.target.parentNode.classList.contains("color-picker-picker")?(this.colorDown(o),this.$scope.$apply()):o.target.classList.contains("color-picker-hue")||o.target.parentNode.classList.contains("color-picker-hue")?(this.hueDown(o),this.$scope.$apply()):(o.target.classList.contains("color-picker-opacity")||o.target.parentNode.classList.contains("color-picker-opacity"))&&(this.opacityDown(o),this.$scope.$apply()))}},{key:"onMouseUp",value:function(o){this.colorMouse||this.hueMouse||this.opacityMouse||0!==this.find(o.target).length?this.colorMouse&&this.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.opacityMouse&&this.has_moused_moved&&(this.opacityUp(o),this.$scope.$apply(),this.onChange(o)):(this.setupApi(),this.api.close(o),this.$scope.$apply())}},{key:"onMouseMove",value:function(o){this.colorMouse?(this.has_moused_moved=!0,this.colorChange(o),this.$scope.$apply()):this.hueMouse?(this.has_moused_moved=!0,this.hueChange(o),this.$scope.$apply()):this.opacityMouse&&(this.has_moused_moved=!0,this.opacityChange(o),this.$scope.$apply())}},{key:"onKeyUp",value:function(o){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:"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.eventApiDispatch("onBlur",[o]),this.api.close(o)}},{key:"initConfig",value:function(){this.options||(this.options={}),this.mergeOptions(this.options,this.ColorPickerOptions),this.visible=this.options.inline,this.options.round&&(this.options.hue=!1)}},{key:"mergeOptions",value:function(o,t){for(var e in t)t.hasOwnProperty(e)&&(o&&o.hasOwnProperty(e)?"object"===i(t[e])&&this.mergeOptions(o[e],t[e]):o[e]=t[e])}},{key:"focus",value:function(){this.find(".color-picker-input")[0].focus()}},{key:"update",value:function(){if(void 0===this.hue||void 0===this.saturation||void 0===this.lightness)return!1;var t,e=o({h:this.hue,s:this.saturation/100,v:this.lightness/100});switch(this.options.alpha&&e.setAlpha(this.opacity/100),this.swatchColor=e.toHslString(),this.options.format){case"rgb":t=e.toRgbString();break;case"hex":t=e.toHexString(),t="lower"===this.options.case?t.toLowerCase():t.toUpperCase();break;case"hex8":t=e.toHex8String(),t="lower"===this.options.case?t.toLowerCase():t.toUpperCase();break;case"hsv":t=e.toHsvString();break;default:t=e.toHslString()}this.updateModel&&(this.ngModel=t)}},{key:"updateSwatchBackground",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-swatch"));o.css({"background-color":this.swatchColor})}},{key:"huePosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-hue"),e=angular.element(o.$element[0].querySelector(".color-picker-hue .color-picker-slider")),i=t.getBoundingClientRect();e.css({top:i.height*o.huePos/100+"px"})})}},{key:"opacityPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-opacity"),e=angular.element(o.$element[0].querySelector(".color-picker-opacity .color-picker-slider")),i=t.getBoundingClientRect();e.css({top:i.height*o.opacityPos/100+"px"})})}},{key:"lightnessPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-grid"),e=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),i=t.getBoundingClientRect();o.options.round||e.css({top:i.height*o.lightnessPos/100+"px"})})}},{key:"saturationPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-grid"),e=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),i=t.getBoundingClientRect();o.options.round?e.css({left:i.width*o.xPos/100+"px",top:i.height*o.yPos/100+"px"}):e.css({left:i.width*o.saturationPos/100+"px"})})}},{key:"gridUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-grid"));o.css({"background-color":this.grid})}},{key:"hueDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.hueMouse=!0}},{key:"hueUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.hueMouse=!1}},{key:"hueChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-hue"),e=this.getEventPos(o);this.hue=360*(1-(e.pageY-this.offset(t).top)/t.prop("offsetHeight")),this.hue>360?this.hue=360:this.hue<0&&(this.hue=0)}},{key:"hueUpdate",value:function(){void 0!==this.hue&&(this.huePos=100*(1-this.hue/360),this.grid=o({h:this.hue,s:100,v:1}).toHslString(),this.huePos<0?this.huePos=0:this.huePos>100&&(this.huePos=100),this.huePosUpdate(),this.gridUpdate(),this.update())}},{key:"opacityDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.opacityMouse=!0}},{key:"opacityUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.opacityMouse=!1}},{key:"opacityChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-opacity"),e=this.getEventPos(o);this.opacity=100*(1-(e.pageY-this.offset(t).top)/t.prop("offsetHeight")),this.opacity>100?this.opacity=100:this.opacity<0&&(this.opacity=0)}},{key:"opacityUpdate",value:function(){void 0!==this.opacity&&(this.opacityPos=100*(1-this.opacity/100),this.opacityPos<0?this.opacityPos=0:this.opacityPos>100&&(this.opacityPos=100),this.opacityPosUpdate(),this.update())}},{key:"colorDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.colorMouse=!0}},{key:"colorUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.colorMouse=!1}},{key:"colorChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-grid-inner"),e=this.getEventPos(o),i=this.offset(t);if(this.options.round){var s=2*(e.pageX-i.left)/t.prop("offsetWidth")-1,n=-(2*(e.pageY-i.top)/t.prop("offsetHeight"))+1,r=Math.sqrt(s*s+n*n),l=Math.atan2(n,s);this.saturation=100*r;var a=57.29577951308233*l;a<0&&(a+=360),this.hue=a,this.lightness=100}else this.saturation=(e.pageX-i.left)/t.prop("offsetWidth")*100,this.lightness=100*(1-(e.pageY-i.top)/t.prop("offsetHeight")),this.saturation>100?this.saturation=100:this.saturation<0&&(this.saturation=0),this.lightness>100?this.lightness=100:this.lightness<0&&(this.lightness=0)}},{key:"saturationUpdate",value:function(o){if(void 0!==this.saturation){if(this.options.round){var t=.01745329251994*this.hue,e=Math.cos(t)*this.saturation,i=-Math.sin(t)*this.saturation;this.xPos=.5*(e+100),this.yPos=.5*(i+100);var s=50,n=Math.pow(s-this.xPos,2)+Math.pow(s-this.yPos,2),r=Math.pow(s,2);if(n>r){var l=Math.atan2(this.yPos-s,this.xPos-s);this.xPos=Math.cos(l)*s+s,this.yPos=Math.sin(l)*s+s}}else this.saturationPos=this.saturation/100*100,this.saturationPos<0?this.saturationPos=0:this.saturationPos>100&&(this.saturationPos=100);this.saturationPosUpdate(),this.update()}}},{key:"lightnessUpdate",value:function(){void 0!==this.lightness&&(this.lightnessPos=100*(1-this.lightness/100),this.lightnessPos<0?this.lightnessPos=0:this.lightnessPos>100&&(this.lightnessPos=100),this.lightnessPosUpdate(),this.update())}},{key:"getEventPos",value:function(o){return 0===o.type.search("touch")?o.changedTouches[0]: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,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,s,n=o[0];if(n)return n.getClientRects().length?(i=n.getBoundingClientRect(),i.width||i.height?(s=n.ownerDocument,e=null!==s&&s===s.window?s:9===s.nodeType&&s.defaultView,t=s.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}}}]),t}();r.$inject=["$scope","$element","$document","$timeout","ColorPickerOptions"],e.$inject=["$templateCache"];var l=function o(){return s(this,o),{required:!1,disabled:!1,hue:!0,alpha:!0,round:!1,case:"upper",format:"hsl",pos:"bottom left",swatch:!0,swatchOnly:!1,swatchPos:"left",swatchBootstrap:!0,inline:!1,placeholder:"",id:void 0,name:void 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(e);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,e,i){o.control=i,o.init()}}}function e(o){o.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\'color-picker-disabled\': AngularColorPickerController.options.disabled,\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,}">   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>       <input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required">       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>   </div>   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',       \'color-picker-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 color-picker-sprite">                   <div class="color-picker-grid-inner"></div>                   <div class="color-picker-picker">                       <div></div>                   </div>               </div>               <div class="color-picker-hue color-picker-sprite" ng-show="AngularColorPickerController.options.hue">                   <div class="color-picker-slider"></div>               </div>               <div class="color-picker-saturation" ng-show="AngularColorPickerController.options.saturation">                   <div class="color-picker-slider"></div>               </div>               <div class="color-picker-lightness" ng-show="AngularColorPickerController.options.lightness">                   <div class="color-picker-slider"></div>               </div>               <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">                   <div class="color-picker-slider"></div>               </div>           </div>       </div>       <div class="color-picker-actions">           <button                class="color-picker-action color-picker-action-clear"               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                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               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 i="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 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,i,n,r){s(this,t),this.$scope=o,this.$element=e,this.$document=i,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}return n(t,[{key:"watchNgModel",value:function(t,e){var i=this;if(!this.colorMouse)if(void 0===t||void 0===e||this.hasOwnProperty("initialNgModel")||(this.initialNgModel=t),this.hasOwnProperty("initialNgModel")&&(t===this.initialNgModel?"function"==typeof this.$scope.control[0].$setPristine&&this.$scope.control[0].$setPristine():"function"==typeof this.$scope.control[0].$setDirty&&this.$scope.control[0].$setDirty()),void 0!==t&&null!==t&&t.length>4){var s=o(t);if(s.isValid()){var n;this.options.round?(n=s.toHsl(),this.lightness=Math.round(100*n.l)):(n=s.toHsv(),this.lightness=Math.round(100*n.v)),this.hue=Math.round(n.h),this.saturation=Math.round(100*n.s),this.updateModel=!1,this.options.alpha&&(this.opacity=100*n.a),this.$timeout(function(){i.updateModel=!0}),this.isValid=!0}else this.isValid=!1;this.$scope.control[0].$setValidity(this.$element.attr("name"),this.isValid)}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.visible||(o.visible=!0,o.hueMouse=!1,o.opacityMouse=!1,o.colorMouse=!1,o.hueUpdate(),o.saturationUpdate(),o.lightnessUpdate(),o.opacityUpdate(),void o.eventApiDispatch("onOpen",[t]))},this.api.close=function(t){o.options.inline||!o.visible&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.visible=!1,o.$scope.$applyAsync(),o.eventApiDispatch("onClose",[t]))},this.api.clear=function(t){""!==o.ngModel&&(o.ngModel="",o.eventApiDispatch("onClear",[t]))},this.api.reset=function(t){o.ngModel!==o.initialNgModel&&(o.ngModel=o.initialNgModel,o.eventApiDispatch("onReset",[t]))},this.api.getElement=function(){return o.$element},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(){var o=this;this.chrome=Boolean(window.chrome);var t=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=t&&t.length>1?parseFloat(t[1]):NaN;var e={mouseDown:this.onMouseDown.bind(this),mouseUp:this.onMouseUp.bind(this),mouseMove:this.onMouseMove.bind(this),keyUp:this.onKeyUp.bind(this)};this.updateModel=!0,this.$scope.$watch("AngularColorPickerController.ngModel",this.watchNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.options.swatchPos",this.watchSwatchPos.bind(this)),this.$scope.$watchGroup(["AngularColorPickerController.options.format","AngularColorPickerController.options.alpha","AngularColorPickerController.options.case"],this.reInitAndUpdate.bind(this)),this.$scope.$watchGroup(["AngularColorPickerController.options.disabled","AngularColorPickerController.options.swatchBootstrap","AngularColorPickerController.options.swatchOnly","AngularColorPickerController.options.swatch","AngularColorPickerController.options.pos","AngularColorPickerController.options.inline","AngularColorPickerController.options.placeholder","AngularColorPickerController.options.round"],this.reInit.bind(this)),this.$scope.$watch("AngularColorPickerController.api",this.setupApi.bind(this)),this.$scope.$watch("AngularColorPickerController.swatchColor",this.updateSwatchBackground.bind(this)),this.$scope.$watch("AngularColorPickerController.hue",this.hueUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.saturation",this.saturationUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.lightness",this.lightnessUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.opacity",this.opacityUpdate.bind(this)),this.$scope.$on("$destroy",function(){o.$document.off("mousedown",e.mouseDown),o.$document.off("mouseup",e.mouseUp),o.$document.off("mousemove",e.mouseMove),o.$document.off("touchstart",e.mouseDown),o.$document.off("touchend",e.mouseUp),o.$document.off("touchmove",e.mouseMove),o.$document.off("keyup",e.keyUp),o.eventApiDispatch("onDestroy")}),this.initConfig(),this.$document.on("mousedown",e.mouseDown),this.$document.on("mouseup",e.mouseUp),this.$document.on("mousemove",e.mouseMove),this.$document.on("touchstart",e.mouseDown),this.$document.on("touchend",e.mouseUp),this.$document.on("touchmove",e.mouseMove),this.$document.on("keyup",e.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))}},{key:"onMouseDown",value:function(o){this.has_moused_moved=!1,!this.options.disabled&&this.find(o.target).length>0&&(o.target.classList.contains("color-picker-grid-inner")||o.target.classList.contains("color-picker-picker")||o.target.parentNode.classList.contains("color-picker-picker")?(this.colorDown(o),this.$scope.$apply()):o.target.classList.contains("color-picker-hue")||o.target.parentNode.classList.contains("color-picker-hue")?(this.hueDown(o),this.$scope.$apply()):o.target.classList.contains("color-picker-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.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){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]),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.visible=this.options.inline,this.options.round?this.options.hue=!1:this.options.saturation=!1,this.options.inline&&(this.options.close.show=!1)}},{key:"mergeOptions",value:function(o,t){for(var e in t)t.hasOwnProperty(e)&&(o&&o.hasOwnProperty(e)?"object"===i(t[e])&&this.mergeOptions(o[e],t[e]):o[e]=t[e])}},{key:"focus",value:function(){this.find(".color-picker-input")[0].focus()}},{key:"update",value:function(){if(void 0===this.hue||void 0===this.saturation||void 0===this.lightness)return!1;var t;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.updateSaturationBackground(t),this.updateLightnessBackground(t);var e;switch(this.options.format){case"rgb":e=t.toRgbString();break;case"hex":e=t.toHexString(),e="lower"===this.options.case?e.toLowerCase():e.toUpperCase();break;case"hex8":e=t.toHex8String(),e="lower"===this.options.case?e.toLowerCase():e.toUpperCase();break;case"hsv":e=t.toHsvString();break;default:e=t.toHslString()}this.updateModel&&(this.ngModel=e)}},{key:"updateSwatchBackground",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-swatch"));o.css({"background-color":this.swatchColor})}},{key:"huePosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-hue"),e=angular.element(o.$element[0].querySelector(".color-picker-hue .color-picker-slider")),i=t.getBoundingClientRect();e.css({top:i.height*o.huePos/100+"px"})})}},{key:"saturationPosUpdate",value:function(){var o=this;this.$timeout(function(){var t,e,i;o.options.round||(t=o.$element[0].querySelector(".color-picker-grid"),e=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),i=t.getBoundingClientRect(),e.css({left:i.width*o.saturationPos/100+"px"})),t=o.$element[0].querySelector(".color-picker-saturation"),e=angular.element(o.$element[0].querySelector(".color-picker-saturation .color-picker-slider")),i=t.getBoundingClientRect(),e.css({top:i.height*(100-o.saturationPos)/100+"px"})})}},{key:"lightnessPosUpdate",value:function(){var o=this;this.$timeout(function(){var t,e,i;o.options.round||(t=o.$element[0].querySelector(".color-picker-grid"),e=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),i=t.getBoundingClientRect(),e.css({top:i.height*o.lightnessPos/100+"px"})),t=o.$element[0].querySelector(".color-picker-lightness"),e=angular.element(o.$element[0].querySelector(".color-picker-lightness .color-picker-slider")),i=t.getBoundingClientRect(),e.css({top:i.height*o.lightnessPos/100+"px"})})}},{key:"opacityPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-opacity"),e=angular.element(o.$element[0].querySelector(".color-picker-opacity .color-picker-slider")),i=t.getBoundingClientRect();e.css({top:i.height*o.opacityPos/100+"px"})})}},{key:"gridUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-grid"));o.css({"background-color":this.grid})}},{key:"hueDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.hueMouse=!0}},{key:"hueUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.hueMouse=!1}},{key:"hueChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-hue"),e=this.getEventPos(o);this.hue=Math.round(360*(1-(e.pageY-this.offset(t).top)/t.prop("offsetHeight"))),this.hue>360?this.hue=360:this.hue<0&&(this.hue=0)}},{key:"hueUpdate",value:function(){void 0!==this.hue&&(this.huePos=100*(1-this.hue/360),this.grid=o({h:this.hue,s:100,v:1}).toHslString(),this.huePos<0?this.huePos=0:this.huePos>100&&(this.huePos=100),this.options.round?(this.getRoundPos(),this.updateRoundPos()):this.gridUpdate(),this.huePosUpdate(),this.update())}},{key:"saturationDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.saturationMouse=!0}},{key:"saturationUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.saturationMouse=!1}},{key:"saturationChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-saturation"),e=this.getEventPos(o);this.saturation=Math.round(100*(1-(e.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:"updateSaturationBackground",value:function(o){var t=this.find(".color-picker-saturation"),e=o.clone().saturate(100),i=o.clone().desaturate(100);t.css({background:"linear-gradient(to bottom, "+e.toHexString()+" 0%, "+i.toHexString()+" 100%)"})}},{key:"updateLightnessBackground",value:function(t){var e=this.find(".color-picker-lightness");if(this.options.round){var i=t.toHsl();i.l=50,i=o(i),e.css({background:"linear-gradient(to bottom, #FFFFFF 0%, "+i.toHexString()+" 50%, #000000 100%)"})}else{var s=t.toHsv();s.v=100,s=o(s),e.css({background:"linear-gradient(to bottom, "+s.toHexString()+" 0%, #000000 100%)"})}}},{key:"lightnessDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.lightnessMouse=!0}},{key:"lightnessUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.lightnessMouse=!1}},{key:"lightnessChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-lightness"),e=this.getEventPos(o);this.lightness=Math.round(100*(1-(e.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){o.stopPropagation(),o.preventDefault(),this.opacityMouse=!0}},{key:"opacityUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.opacityMouse=!1}},{key:"opacityChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-opacity"),e=this.getEventPos(o);this.opacity=100*(1-(e.pageY-this.offset(t).top)/t.prop("offsetHeight")),this.opacity>100?this.opacity=100:this.opacity<0&&(this.opacity=0)}},{key:"opacityUpdate",value:function(){void 0!==this.opacity&&(this.opacityPos=100*(1-this.opacity/100),this.opacityPos<0?this.opacityPos=0:this.opacityPos>100&&(this.opacityPos=100),this.opacityPosUpdate(),this.update())}},{key:"colorDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.colorMouse=!0}},{key:"colorUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.colorMouse=!1}},{key:"colorChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-grid-inner"),e=this.getEventPos(o),i=this.offset(t);if(this.options.round){var s=2*(e.pageX-i.left)/t.prop("offsetWidth")-1,n=-(2*(e.pageY-i.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}else this.saturation=(e.pageX-i.left)/t.prop("offsetWidth")*100,this.lightness=100*(1-(e.pageY-i.top)/t.prop("offsetHeight")),this.saturation>100?this.saturation=100:this.saturation<0&&(this.saturation=0),this.lightness>100?this.lightness=100:this.lightness<0&&(this.lightness=0)}},{key:"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);var i=50,s=Math.pow(i-this.xPos,2)+Math.pow(i-this.yPos,2),n=Math.pow(i,2);if(s>n){var r=Math.atan2(this.yPos-i,this.xPos-i);this.xPos=Math.cos(r)*i+i,this.yPos=Math.sin(r)*i+i}}},{key:"updateRoundPos",value:function(){var o=this.$element[0].querySelector(".color-picker-grid"),t=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker")),e=o.getBoundingClientRect();t.css({left:e.width*this.xPos/100+"px",top:e.height*this.yPos/100+"px"})}},{key:"getEventPos",value:function(o){return 0===o.type.search("touch")?o.changedTouches[0]: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,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,s,n=o[0];if(n)return n.getClientRects().length?(i=n.getBoundingClientRect(),i.width||i.height?(s=n.ownerDocument,e=null!==s&&s===s.window?s:9===s.nodeType&&s.defaultView,t=s.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}}}]),t}();r.$inject=["$scope","$element","$document","$timeout","ColorPickerOptions"],e.$inject=["$templateCache"];var l=function o(){return s(this,o),{required:!1,disabled:!1,hue:!0,saturation:!1,lightness:!1,alpha:!0,round:!1,case:"upper",format:"hsl",pos:"bottom left",swatch:!0,swatchOnly:!1,swatchPos:"left",swatchBootstrap:!0,inline:!1,placeholder:"",id:void 0,name:void 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(e);return a});

examples/app.js

@@ -7,4 +7,5 @@ angular
             options.round = true;
-            options.alpha = false;
-            options.format = 'hex';
+            options.lightness = true;
+            options.inline = true;
+            options.format = 'hsl';
             return options;
@@ -25,2 +26,3 @@ });
             reset: {show: true},
+            placeholder: $scope.color,
         };
@@ -27,0 +29,0 @@ $scope.api = {};

package.json

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

README.md

@@ -40,4 +40,4 @@ # Angular Color Picker
 
-    <script src="node_modules/tinycolor2/dist/tinycolor2-min.js"></script>
-    <script src="node_modules/angular-color-picker/dist/angularjs-color-picker.min.js"></script>
+    <script src="node_modules/tinycolor2/dist/tinycolor-min.js"></script>
+    <script src="node_modules/angularjs-color-picker/dist/angularjs-color-picker.min.js"></script>
     ```
@@ -80,2 +80,4 @@
     hue: [true, false],
+    saturation: [false, true],
+    lightness: [false, true], // Note: In the square mode this is HSV instead of HSL
     alpha: [true, false],
@@ -82,0 +84,0 @@ swatch: [true, false],

src/scripts/controller.js

@@ -46,10 +46,17 @@ import tinycolor from 'tinycolor2';
             if (color.isValid()) {
-                var hsl = color.toHsv();
+                var hsl;
 
+                if (this.options.round) {
+                    hsl = color.toHsl();
+                    this.lightness = Math.round(hsl.l * 100);
+                } else {
+                    hsl = color.toHsv();
+                    this.lightness = Math.round(hsl.v * 100);
+                }
+
+                this.hue = Math.round(hsl.h);
+                this.saturation = Math.round(hsl.s * 100);
+
                 this.updateModel = false;
 
-                this.hue = hsl.h;
-                this.saturation = hsl.s * 100;
-                this.lightness = hsl.v * 100;
-
                 if (this.options.alpha) {
@@ -117,4 +124,7 @@ this.opacity = hsl.a * 100;
         this.api.close = (event) => {
-            if (!this.options.inline && (this.visible || this.$element[0].querySelector('.color-picker-panel').offsetParent !== null)) {
-
+            if (
+                !this.options.inline &&
+                (this.visible ||
+                this.$element[0].querySelector('.color-picker-panel').offsetParent !== null)
+            ) {
                 this.visible = false;
@@ -277,2 +287,10 @@ this.$scope.$applyAsync();
 
+        // saturation click
+        this.find('.color-picker-saturation').on('click', this.onSaturationClick.bind(this));
+        this.find('.color-picker-saturation').on('touchend', this.onSaturationClick.bind(this));
+
+        // lightness click
+        this.find('.color-picker-lightness').on('click', this.onLightnessClick.bind(this));
+        this.find('.color-picker-lightness').on('touchend', this.onLightnessClick.bind(this));
+
         // opacity click
@@ -296,2 +314,10 @@ this.find('.color-picker-opacity').on('click', this.onOpacityClick.bind(this));
                 this.$scope.$apply();
+            // mouse event on saturation slider
+            } else if (event.target.classList.contains('color-picker-saturation') || event.target.parentNode.classList.contains('color-picker-saturation')) {
+                this.saturationDown(event);
+                this.$scope.$apply();
+            // mouse event on lightness slider
+            } else if (event.target.classList.contains('color-picker-lightness') || event.target.parentNode.classList.contains('color-picker-lightness')) {
+                this.lightnessDown(event);
+                this.$scope.$apply();
             // mouse event on opacity slider
@@ -312,3 +338,3 @@ } else if (event.target.classList.contains('color-picker-opacity') || event.target.parentNode.classList.contains('color-picker-opacity')) {
         // mouse event on color grid
-    } else if (this.colorMouse && this.has_moused_moved) {
+        } else if (this.colorMouse && this.has_moused_moved) {
             this.colorUp(event);
@@ -322,2 +348,12 @@ this.$scope.$apply();
             this.onChange(event);
+        // mouse event on saturation slider
+        } else if (this.saturationMouse && this.has_moused_moved) {
+            this.saturationUp(event);
+            this.$scope.$apply();
+            this.onChange(event);
+        // mouse event on lightness slider
+        } else if (this.lightnessMouse && this.has_moused_moved) {
+            this.lightnessUp(event);
+            this.$scope.$apply();
+            this.onChange(event);
         // mouse event on opacity slider
@@ -342,2 +378,12 @@ } else if (this.opacityMouse && this.has_moused_moved) {
             this.$scope.$apply();
+        // mouse event on saturation slider
+        } else if (this.saturationMouse) {
+            this.has_moused_moved = true;
+            this.saturationChange(event);
+            this.$scope.$apply();
+        // mouse event on lightness slider
+        } else if (this.lightnessMouse) {
+            this.has_moused_moved = true;
+            this.lightnessChange(event);
+            this.$scope.$apply();
         // mouse event on opacity slider
@@ -376,2 +422,20 @@ } else if (this.opacityMouse) {
 
+    onSaturationClick (event) {
+        if (!this.options.disabled && !this.has_moused_moved) {
+            this.saturationChange(event);
+            this.saturationUp(event);
+            this.$scope.$apply();
+            this.onChange(event);
+        }
+    }
+
+    onLightnessClick (event) {
+        if (!this.options.disabled && !this.has_moused_moved) {
+            this.lightnessChange(event);
+            this.lightnessUp(event);
+            this.$scope.$apply();
+            this.onChange(event);
+        }
+    }
+
     onOpacityClick (event) {
@@ -401,4 +465,10 @@ if (!this.options.disabled && !this.has_moused_moved) {
 
+        this.$scope.control[0].$setTouched();
+
         this.eventApiDispatch('onBlur', [event]);
-        this.api.close(event);
+
+        // if clicking outside the color picker
+        if (this.find(event.relatedTarget).length === 0) {
+            this.api.close(event);
+        }
     }
@@ -417,3 +487,9 @@
             this.options.hue = false;
+        } else {
+            this.options.saturation = false;
         }
+
+        if (this.options.inline) {
+            this.options.close.show = false;
+        }
     }
@@ -442,5 +518,10 @@
 
-        var color = tinycolor({h: this.hue, s: this.saturation / 100, v: this.lightness / 100}),
-            colorString;
+        var color;
 
+        if (this.options.round) {
+            color = tinycolor({h: this.hue, s: this.saturation, l: this.lightness});
+        } else {
+            color = tinycolor({h: this.hue, s: this.saturation, v: this.lightness});
+        }
+
         if (this.options.alpha) {
@@ -452,3 +533,7 @@ color.setAlpha(this.opacity / 100);
         this.swatchColor = color.toHslString();
+        this.updateSaturationBackground(color);
+        this.updateLightnessBackground(color);
 
+        var colorString;
+
         switch (this.options.format) {
@@ -512,10 +597,22 @@ case 'rgb':
 
-    opacityPosUpdate () {
+    saturationPosUpdate () {
         this.$timeout(() => {
-            var container = this.$element[0].querySelector('.color-picker-opacity');
-            var el = angular.element(this.$element[0].querySelector('.color-picker-opacity .color-picker-slider'));
-            var bounding = container.getBoundingClientRect();
+            var container, el, bounding;
 
+            if (!this.options.round) {
+                container = this.$element[0].querySelector('.color-picker-grid');
+                el = angular.element(this.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                bounding = container.getBoundingClientRect();
+
+                el.css({
+                    'left': (bounding.width * this.saturationPos / 100) + 'px',
+                });
+            }
+
+            container = this.$element[0].querySelector('.color-picker-saturation');
+            el = angular.element(this.$element[0].querySelector('.color-picker-saturation .color-picker-slider'));
+            bounding = container.getBoundingClientRect();
+
             el.css({
-                'top': (bounding.height * this.opacityPos / 100) + 'px',
+                'top': (bounding.height * (100 - this.saturationPos) / 100) + 'px',
             });
@@ -527,7 +624,9 @@ });
         this.$timeout(() => {
-            var container = this.$element[0].querySelector('.color-picker-grid');
-            var el = angular.element(this.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
-            var bounding = container.getBoundingClientRect();
+            var container, el, bounding;
 
             if (!this.options.round) {
+                container = this.$element[0].querySelector('.color-picker-grid');
+                el = angular.element(this.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                bounding = container.getBoundingClientRect();
+
                 el.css({
@@ -537,22 +636,22 @@ 'top': (bounding.height * this.lightnessPos / 100) + 'px',
             }
+
+            container = this.$element[0].querySelector('.color-picker-lightness');
+            el = angular.element(this.$element[0].querySelector('.color-picker-lightness .color-picker-slider'));
+            bounding = container.getBoundingClientRect();
+
+            el.css({
+                'top': (bounding.height * this.lightnessPos / 100) + 'px',
+            });
         });
     }
 
-    saturationPosUpdate () {
+    opacityPosUpdate () {
         this.$timeout(() => {
-            var container = this.$element[0].querySelector('.color-picker-grid');
-            var el = angular.element(this.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
+            var container = this.$element[0].querySelector('.color-picker-opacity');
+            var el = angular.element(this.$element[0].querySelector('.color-picker-opacity .color-picker-slider'));
             var bounding = container.getBoundingClientRect();
 
-            if (this.options.round) {
-                el.css({
-                    left: (bounding.width * this.xPos / 100) + 'px',
-                    top: (bounding.height * this.yPos / 100) + 'px',
-                });
-            }
-            else {
-                el.css({
-                    'left': (bounding.width * this.saturationPos / 100) + 'px',
-                });
-            }
+            el.css({
+                'top': (bounding.height * this.opacityPos / 100) + 'px',
+            });
         });
@@ -594,3 +693,3 @@ }
 
-        this.hue = (1 - ((eventPos.pageY - this.offset(el).top) / el.prop('offsetHeight'))) * 360;
+        this.hue = Math.round((1 - ((eventPos.pageY - this.offset(el).top) / el.prop('offsetHeight'))) * 360);
 
@@ -615,4 +714,10 @@ if (this.hue > 360) {
 
+            if (this.options.round) {
+                this.getRoundPos();
+                this.updateRoundPos();
+            } else {
+                this.gridUpdate();
+            }
+
             this.huePosUpdate();
-            this.gridUpdate();
             this.update();
@@ -623,2 +728,139 @@ }
     //---------------------------
+    // saturation functions
+    //---------------------------
+
+    saturationDown (event) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        this.saturationMouse = true;
+    }
+
+    saturationUp (event) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        this.saturationMouse = false;
+    }
+
+    saturationChange (event) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        var el = this.find('.color-picker-saturation');
+        var eventPos = this.getEventPos(event);
+
+        this.saturation = Math.round((1 - ((eventPos.pageY - this.offset(el).top) / el.prop('offsetHeight'))) * 100);
+
+        if (this.saturation > 100) {
+            this.saturation = 100;
+        } else if (this.saturation < 0) {
+            this.saturation = 0;
+        }
+    }
+
+    saturationUpdate () {
+        if (this.saturation !== undefined) {
+            if (this.options.round) {
+                this.getRoundPos();
+                this.updateRoundPos();
+            }
+
+            this.saturationPos = this.saturation;
+
+            if (this.saturationPos < 0) {
+                this.saturationPos = 0;
+            } else if (this.saturationPos > 100) {
+                this.saturationPos = 100;
+            }
+
+            this.saturationPosUpdate();
+            this.update();
+        }
+    }
+
+    updateSaturationBackground (color) {
+        var el = this.find('.color-picker-saturation');
+        var saturated = color.clone().saturate(100);
+        var desaturated = color.clone().desaturate(100);
+
+        el.css({
+            'background': 'linear-gradient(to bottom, ' + saturated.toHexString() + ' 0%, ' + desaturated.toHexString() + ' 100%)'
+        });
+    }
+
+    updateLightnessBackground (color) {
+        var el = this.find('.color-picker-lightness');
+
+        if (this.options.round) {
+            var hsl = color.toHsl();
+            hsl.l = 50;
+            hsl = tinycolor(hsl);
+            
+            el.css({
+                'background': 'linear-gradient(to bottom, #FFFFFF 0%, ' + hsl.toHexString() + ' 50%, #000000 100%)'
+            });
+        } else {
+            var hsv = color.toHsv();
+            hsv.v = 100;
+            hsv = tinycolor(hsv);
+
+            el.css({
+                'background': 'linear-gradient(to bottom, ' + hsv.toHexString() + ' 0%, #000000 100%)'
+            });
+        }
+
+
+    }
+
+    //---------------------------
+    // lightness functions
+    //---------------------------
+
+    lightnessDown (event) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        this.lightnessMouse = true;
+    }
+
+    lightnessUp (event) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        this.lightnessMouse = false;
+    }
+
+    lightnessChange (event) {
+        event.stopPropagation();
+        event.preventDefault();
+
+        var el = this.find('.color-picker-lightness');
+        var eventPos = this.getEventPos(event);
+
+        this.lightness = Math.round((1 - ((eventPos.pageY - this.offset(el).top) / el.prop('offsetHeight'))) * 100);
+
+        if (this.lightness > 100) {
+            this.lightness = 100;
+        } else if (this.lightness < 0) {
+            this.lightness = 0;
+        }
+    }
+
+    lightnessUpdate () {
+        if (this.lightness !== undefined) {
+            this.lightnessPos = 100 - this.lightness;
+
+            if (this.lightnessPos < 0) {
+                this.lightnessPos = 0;
+            } else if (this.lightnessPos > 100) {
+                this.lightnessPos = 100;
+            }
+
+            this.lightnessPosUpdate();
+            this.update();
+        }
+    }
+
+    //---------------------------
     // opacity functions
@@ -702,12 +944,18 @@ //---------------------------
 
-            var tmpSaturation = Math.sqrt(dx * dx + dy * dy);
             var tmpHue = Math.atan2(dy, dx);
+            var degHue = Math.round(tmpHue * 57.29577951308233); // rad to deg
+            if (degHue < 0) {
+                degHue += 360;
+            }
+            this.hue = degHue;
 
-            this.saturation = 100 * tmpSaturation;
-            var degHue = tmpHue * 57.29577951308233; // rad to deg
-            if (degHue < 0.0) {
-                degHue += 360.0;
+            var tmpSaturation = Math.sqrt(dx * dx + dy * dy);
+
+            if (tmpSaturation > 1) {
+                tmpSaturation = 1;
+            } else if (tmpSaturation < 0) {
+                tmpSaturation = 0;
             }
-            this.hue = degHue;
-            this.lightness =  100;
+
+            this.saturation = tmpSaturation * 100;
         } else {
@@ -731,60 +979,40 @@ this.saturation = ((eventPos.pageX - offset.left) / el.prop('offsetWidth')) * 100;
 
-    saturationUpdate (oldValue) {
-        if (this.saturation !== undefined) {
-            if (this.options.round) {
-                var angle = this.hue * 0.01745329251994; // deg to rad
-                var px = Math.cos(angle) * this.saturation;
-                var py = -Math.sin(angle) * this.saturation;
+    //---------------------------
+    // helper functions
+    //---------------------------
 
-                this.xPos = (px + 100.0) * 0.5;
-                this.yPos = (py + 100.0) * 0.5;
+    getRoundPos() {
+        var angle = this.hue * 0.01745329251994; // deg to rad
+        var px = Math.cos(angle) * this.saturation;
+        var py = -Math.sin(angle) * this.saturation;
 
-                // because we are using percentages this can be half of 100%
-                var center = 50;
-                // distance of pointer from the center of the circle
-                var distance = Math.pow(center - this.xPos, 2) + Math.pow(center - this.yPos, 2);
-                // distance of edge of circle from the center of the circle
-                var radius = Math.pow(center, 2);
+        this.xPos = (px + 100.0) * 0.5;
+        this.yPos = (py + 100.0) * 0.5;
 
-                // if not inside the circle
-                if (distance > radius) {
-                    var rads = Math.atan2(this.yPos - center, this.xPos - center);
+        // because it are using percentages this can be half of 100%
+        var center = 50;
+        // distance of pointer from the center of the circle
+        var distance = Math.pow(center - this.xPos, 2) + Math.pow(center - this.yPos, 2);
+        // distance of edge of circle from the center of the circle
+        var radius = Math.pow(center, 2);
 
-                    this.xPos = Math.cos(rads) * center + center;
-                    this.yPos = Math.sin(rads) * center + center;
-                }
-            } else {
-                this.saturationPos = (this.saturation / 100) * 100;
-
-                if (this.saturationPos < 0) {
-                    this.saturationPos = 0;
-                } else if (this.saturationPos > 100) {
-                    this.saturationPos = 100;
-                }
-            }
-
-            this.saturationPosUpdate();
-            this.update();
+        // if not inside the circle
+        if (distance > radius) {
+            var rads = Math.atan2(this.yPos - center, this.xPos - center);
+            this.xPos = Math.cos(rads) * center + center;
+            this.yPos = Math.sin(rads) * center + center;
         }
     }
 
-    lightnessUpdate () {
-        if (this.lightness !== undefined) {
-            this.lightnessPos = (1 - (this.lightness / 100)) * 100;
+    updateRoundPos() {
+        var container = this.$element[0].querySelector('.color-picker-grid');
+        var el = angular.element(this.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
+        var bounding = container.getBoundingClientRect();
 
-            if (this.lightnessPos < 0) {
-                this.lightnessPos = 0;
-            } else if (this.lightnessPos > 100) {
-                this.lightnessPos = 100;
-            }
-
-            this.lightnessPosUpdate();
-            this.update();
-        }
+        el.css({
+            left: (bounding.width * this.xPos / 100) + 'px',
+            top: (bounding.height * this.yPos / 100) + 'px',
+        });
     }
 
-    //---------------------------
-    // helper functions
-    //---------------------------
-
     getEventPos(event) {
@@ -791,0 +1019,0 @@ return event.type.search('touch') === 0 ? event.changedTouches[0] : event;

src/scripts/options-service.js

@@ -7,2 +7,4 @@ export default class AngularColorPickerOptions {
             hue: true,
+            saturation: false,
+            lightness: false,
             alpha: true,
@@ -9,0 +11,0 @@ round: false,

src/scripts/template.js

@@ -19,2 +19,4 @@ export default function template($templateCache) {
         '       \'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\',' +
@@ -34,2 +36,8 @@ '       \'color-picker-show-inline\': AngularColorPickerController.options.inline,' +
         '               </div>' +
+        '               <div class="color-picker-saturation" ng-show="AngularColorPickerController.options.saturation">' +
+        '                   <div class="color-picker-slider"></div>' +
+        '               </div>' +
+        '               <div class="color-picker-lightness" ng-show="AngularColorPickerController.options.lightness">' +
+        '                   <div class="color-picker-slider"></div>' +
+        '               </div>' +
         '               <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">' +
@@ -36,0 +44,0 @@ '                   <div class="color-picker-slider"></div>' +

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

582125

increased by5.21%

Lines of code

3437

increased by15.53%

Number of lines in readme file

155

increased by1.31%

No dependency changes