angularjs-color-picker - npm Package Compare versions

Comparing version 3.4.1 to 3.4.2

bower.json

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

CHANGELOG.md

 # Changelog
 
+## v3.4.2
+
+#### Breaking Changes
+  * None
+
+#### New Features
+  * Feature #160 - Support `ng-model-options="{getterSetter:true}"`
+  * Feature #164 - Add `preserveInputFormat` option to control whether or not a valid input color of a different format should change to the configured format. For a visual explanation see https://github.com/ruhley/angular-color-picker/pull/164
+
+#### Bug Fixes
+    * Bug #161 - Format option is now case insensitive
+
 ## v3.4.1
@@ -4,0 +16,0 @@

dist/angularjs-color-picker.js

 /*!
- * angularjs-color-picker v3.4.1
+ * angularjs-color-picker v3.4.2
  * https://github.com/ruhley/angular-color-picker/
@@ -7,3 +7,3 @@ *
  *
- * 2017-07-31 08:38:19
+ * 2017-08-07 10:05:04
  *
@@ -71,4 +71,6 @@ */
 
+        // make the init function available from the $scope (for the directive link function)
         this.$scope.init = this.init.bind(this);
 
+        // set default values
         this.hue = 0;
@@ -89,4 +91,6 @@ this.saturation = undefined;
 
+            // sets the field to pristine or dirty for angular
             this.checkDirty(newValue);
 
+            // the mouse is still moving so don't do anything yet
             if (this.colorMouse) {
@@ -138,2 +142,13 @@ return;
     }, {
+        key: 'setNgModel',
+        value: function setNgModel(value) {
+            this.internalNgModel = value;
+
+            if (this.ngModelOptions.getterSetter) {
+                this.ngModel(value);
+            } else {
+                this.ngModel = value;
+            }
+        }
+    }, {
         key: 'watchSwatchPos',
@@ -171,2 +186,3 @@ value: function watchSwatchPos(newValue) {
 
+                // force redraw
                 _this3.$scope.$applyAsync();
@@ -193,4 +209,4 @@
             this.api.clear = function (event) {
-                if (_this3.ngModel !== '') {
-                    _this3.ngModel = '';
+                if (_this3.internalNgModel !== '') {
+                    _this3.setNgModel('');
 
@@ -202,4 +218,4 @@ _this3.eventApiDispatch('onClear', [event]);
             this.api.reset = function (event) {
-                if (_this3.ngModel !== _this3.initialNgModel) {
-                    _this3.ngModel = _this3.initialNgModel;
+                if (_this3.internalNgModel !== _this3.initialNgModel) {
+                    _this3.setNgModel(_this3.initialNgModel);
 
@@ -236,2 +252,7 @@ _this3.eventApiDispatch('onReset', [event]);
         value: function init() {
+            this.internalNgModel = this.ngModel;
+
+            // ng model options
+            this.ngModelOptions = this.$scope.control[0].$options.$$options;
+
             // browser variables
@@ -257,5 +278,7 @@ this.chrome = Boolean(window.chrome);
         value: function initWatchers() {
+
             // ngModel
 
             this.$scope.$watch('AngularColorPickerController.ngModel', this.watchNgModel.bind(this));
+            this.$scope.$watch('AngularColorPickerController.internalNgModel', this.watchNgModel.bind(this));
 
@@ -266,3 +289,3 @@ // options
 
-            this.$scope.$watchGroup(['AngularColorPickerController.options.format', 'AngularColorPickerController.options.alpha', 'AngularColorPickerController.options.case', 'AngularColorPickerController.options.round', 'AngularColorPickerController.options.restrictToFormat', 'AngularColorPickerController.options.allowEmpty', 'AngularColorPickerController.options.horizontal'], this.reInitAndUpdate.bind(this));
+            this.$scope.$watchGroup(['AngularColorPickerController.options.format', 'AngularColorPickerController.options.alpha', 'AngularColorPickerController.options.case', 'AngularColorPickerController.options.round', 'AngularColorPickerController.options.restrictToFormat', 'AngularColorPickerController.options.preserveInputFormat', 'AngularColorPickerController.options.allowEmpty', 'AngularColorPickerController.options.horizontal'], this.reInitAndUpdate.bind(this));
 
@@ -517,4 +540,4 @@ this.$scope.$watchGroup(['AngularColorPickerController.options.disabled', 'AngularColorPickerController.options.swatchBootstrap', 'AngularColorPickerController.options.swatchOnly', 'AngularColorPickerController.options.swatch', 'AngularColorPickerController.options.pos', 'AngularColorPickerController.options.inline', 'AngularColorPickerController.options.placeholder'], this.reInit.bind(this));
             // don't fire if it hasn't actually changed
-            if (this.ngModel !== this.onChangeValue) {
-                this.onChangeValue = this.ngModel;
+            if (this.internalNgModel !== this.onChangeValue) {
+                this.onChangeValue = this.internalNgModel;
 
@@ -527,3 +550,3 @@ this.eventApiDispatch('onChange', [event]);
         value: function onBlur(event) {
-            if (this.ngModel !== this.onChangeValue) {
+            if (this.internalNgModel !== this.onChangeValue) {
                 this.updateModel = true;
@@ -604,5 +627,13 @@ this.update();
             if (this.options.round) {
-                color = tinycolor({ h: this.hue, s: this.saturation + '%', l: this.lightness + '%' });
+                color = tinycolor({
+                    h: this.hue,
+                    s: this.saturation + '%',
+                    l: this.lightness + '%'
+                });
             } else {
-                color = tinycolor({ h: this.hue, s: this.saturation + '%', v: this.lightness + '%' });
+                color = tinycolor({
+                    h: this.hue,
+                    s: this.saturation + '%',
+                    v: this.lightness + '%'
+                });
             }
@@ -626,6 +657,8 @@
 
-            if (this.updateModel) {
-                switch (this.options.format) {
+            var skipUpdate = this.options.preserveInputFormat && tinycolor(this.internalNgModel).toHsvString() === color.toHsvString();
+
+            if (this.updateModel && !skipUpdate) {
+                switch (this.options.format.toLowerCase()) {
                     case 'rgb':
-                        this.ngModel = color.toRgbString();
+                        this.setNgModel(color.toRgbString());
                         break;
@@ -635,5 +668,5 @@
                         if (this.options.case === 'lower') {
-                            this.ngModel = color.toHex().toLowerCase();
+                            this.setNgModel(color.toHex().toLowerCase());
                         } else {
-                            this.ngModel = color.toHex().toUpperCase();
+                            this.setNgModel(color.toHex().toUpperCase());
                         }
@@ -644,5 +677,5 @@ break;
                         if (this.options.case === 'lower') {
-                            this.ngModel = color.toHex8().toLowerCase();
+                            this.setNgModel(color.toHex8().toLowerCase());
                         } else {
-                            this.ngModel = color.toHex8().toUpperCase();
+                            this.setNgModel(color.toHex8().toUpperCase());
                         }
@@ -653,5 +686,5 @@ break;
                         if (this.options.case === 'lower') {
-                            this.ngModel = color.toHexString().toLowerCase();
+                            this.setNgModel(color.toHexString().toLowerCase());
                         } else {
-                            this.ngModel = color.toHexString().toUpperCase();
+                            this.setNgModel(color.toHexString().toUpperCase());
                         }
@@ -662,5 +695,5 @@ break;
                         if (this.options.case === 'lower') {
-                            this.ngModel = color.toHex8String().toLowerCase();
+                            this.setNgModel(color.toHex8String().toLowerCase());
                         } else {
-                            this.ngModel = color.toHex8String().toUpperCase();
+                            this.setNgModel(color.toHex8String().toUpperCase());
                         }
@@ -670,11 +703,11 @@ break;
                     case 'hsv':
-                        this.ngModel = color.toHsvString();
+                        this.setNgModel(color.toHsvString());
                         break;
 
                     case 'raw':
-                        this.ngModel = color.clone();
+                        this.setNgModel(color.clone());
                         break;
 
                     default:
-                        this.ngModel = color.toHslString();
+                        this.setNgModel(color.toHslString());
                         break;
@@ -1309,3 +1342,3 @@ }
 
-                args.unshift(this.ngModel);
+                args.unshift(this.internalNgModel);
                 args.unshift(this.api);
@@ -1366,3 +1399,6 @@
             if (!elem.getClientRects().length) {
-                return { top: 0, left: 0 };
+                return {
+                    top: 0,
+                    left: 0
+                };
             }
@@ -1422,3 +1458,3 @@
 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,' + '\'color-picker-open\': AngularColorPickerController.is_open,' + '\'color-picker-closed\': !AngularColorPickerController.is_open,' + '\'color-picker-horizontal\': AngularColorPickerController.options.horizontal,' + '}">' + '<div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">' + '<span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '<input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input {{AngularColorPickerController.options.inputClass}}" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required">' + '<span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '</div>' + '<div class="color-picker-panel" ng-class="{' + '\'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',' + '\'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',' + '\'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',' + '\'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',' + '\'color-picker-panel-round\': AngularColorPickerController.options.round,' + '\'color-picker-show-hue\': AngularColorPickerController.options.hue,' + '\'color-picker-show-saturation\': AngularColorPickerController.options.saturation,' + '\'color-picker-show-lightness\': AngularColorPickerController.options.lightness,' + '\'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',' + '\'color-picker-show-inline\': AngularColorPickerController.options.inline,' + '}">' + '<div class="color-picker-grid-wrapper">' + '<div class="color-picker-row">' + '<div class="color-picker-grid">' + '<div class="color-picker-overlay"></div>' + '<div class="color-picker-grid-inner"></div>' + '<div class="color-picker-picker">' + '<div></div>' + '</div>' + '</div>' + '<div class="color-picker-hue" ng-show="AngularColorPickerController.options.hue">' + '<div class="color-picker-overlay"></div>' + '<div class="color-picker-slider"></div>' + '</div>' + '<div class="color-picker-saturation" ng-show="AngularColorPickerController.options.saturation">' + '<div class="color-picker-overlay"></div>' + '<div class="color-picker-slider"></div>' + '</div>' + '<div class="color-picker-lightness" ng-show="AngularColorPickerController.options.lightness">' + '<div class="color-picker-overlay"></div>' + '<div class="color-picker-slider"></div>' + '</div>' + '<div class="color-picker-opacity" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">' + '<div class="color-picker-overlay"></div>' + '<div class="color-picker-slider"></div>' + '</div>' + '</div>' + '</div>' + '<div class="color-picker-actions">' + '<button ' + 'type="button"' + 'class="color-picker-action color-picker-action-clear"' + 'tabindex="-1"' + 'ng-class="AngularColorPickerController.options.clear.class"' + 'ng-show="AngularColorPickerController.options.clear.show"' + 'ng-click="AngularColorPickerController.api.clear($event)"' + '>' + '{{AngularColorPickerController.options.clear.label}}' + '</button>' + '<button ' + 'type="button"' + 'class="color-picker-action color-picker-action-reset"' + 'tabindex="-1"' + 'ng-class="AngularColorPickerController.options.reset.class"' + 'ng-show="AngularColorPickerController.options.reset.show"' + 'ng-click="AngularColorPickerController.api.reset($event)"' + '>' + '{{AngularColorPickerController.options.reset.label}}' + '</button>' + '<button ' + 'type="button"' + 'class="color-picker-action color-picker-action-close"' + 'tabindex="-1"' + 'ng-class="AngularColorPickerController.options.close.class"' + 'ng-show="AngularColorPickerController.options.close.show"' + 'ng-click="AngularColorPickerController.api.close($event)"' + '>' + '{{AngularColorPickerController.options.close.label}}' + '</button>' + '</div>' + '</div>' + '</div>');
+    $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,' + '\'color-picker-open\': AngularColorPickerController.is_open,' + '\'color-picker-closed\': !AngularColorPickerController.is_open,' + '\'color-picker-horizontal\': AngularColorPickerController.options.horizontal,' + '}">' + '<div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">' + '<span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '<input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input {{AngularColorPickerController.options.inputClass}}" type="text" ng-model="AngularColorPickerController.internalNgModel" ng-model-options="AngularColorPickerController.ngModelOptions" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required">' + '<span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '</div>' + '<div class="color-picker-panel" ng-class="{' + '\'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',' + '\'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',' + '\'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',' + '\'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',' + '\'color-picker-panel-round\': AngularColorPickerController.options.round,' + '\'color-picker-show-hue\': AngularColorPickerController.options.hue,' + '\'color-picker-show-saturation\': AngularColorPickerController.options.saturation,' + '\'color-picker-show-lightness\': AngularColorPickerController.options.lightness,' + '\'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',' + '\'color-picker-show-inline\': AngularColorPickerController.options.inline,' + '}">' + '<div class="color-picker-grid-wrapper">' + '<div class="color-picker-row">' + '<div class="color-picker-grid">' + '<div class="color-picker-overlay"></div>' + '<div class="color-picker-grid-inner"></div>' + '<div class="color-picker-picker">' + '<div></div>' + '</div>' + '</div>' + '<div class="color-picker-hue" ng-show="AngularColorPickerController.options.hue">' + '<div class="color-picker-overlay"></div>' + '<div class="color-picker-slider"></div>' + '</div>' + '<div class="color-picker-saturation" ng-show="AngularColorPickerController.options.saturation">' + '<div class="color-picker-overlay"></div>' + '<div class="color-picker-slider"></div>' + '</div>' + '<div class="color-picker-lightness" ng-show="AngularColorPickerController.options.lightness">' + '<div class="color-picker-overlay"></div>' + '<div class="color-picker-slider"></div>' + '</div>' + '<div class="color-picker-opacity" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">' + '<div class="color-picker-overlay"></div>' + '<div class="color-picker-slider"></div>' + '</div>' + '</div>' + '</div>' + '<div class="color-picker-actions">' + '<button ' + 'type="button"' + 'class="color-picker-action color-picker-action-clear"' + 'tabindex="-1"' + 'ng-class="AngularColorPickerController.options.clear.class"' + 'ng-show="AngularColorPickerController.options.clear.show"' + 'ng-click="AngularColorPickerController.api.clear($event)"' + '>' + '{{AngularColorPickerController.options.clear.label}}' + '</button>' + '<button ' + 'type="button"' + 'class="color-picker-action color-picker-action-reset"' + 'tabindex="-1"' + 'ng-class="AngularColorPickerController.options.reset.class"' + 'ng-show="AngularColorPickerController.options.reset.show"' + 'ng-click="AngularColorPickerController.api.reset($event)"' + '>' + '{{AngularColorPickerController.options.reset.label}}' + '</button>' + '<button ' + 'type="button"' + 'class="color-picker-action color-picker-action-close"' + 'tabindex="-1"' + 'ng-class="AngularColorPickerController.options.close.class"' + 'ng-show="AngularColorPickerController.options.close.show"' + 'ng-click="AngularColorPickerController.api.close($event)"' + '>' + '{{AngularColorPickerController.options.close.label}}' + '</button>' + '</div>' + '</div>' + '</div>');
 }
@@ -1441,2 +1477,3 @@
         restrictToFormat: false,
+        preserveInputFormat: false,
         allowEmpty: false,
@@ -1443,0 +1480,0 @@ // color

dist/angularjs-color-picker.min.js

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

package.json

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

README.md

@@ -5,3 +5,2 @@ # Angular Color Picker
 
-[![Build Status](https://travis-ci.org/ruhley/angular-color-picker.svg?branch=master)](https://travis-ci.org/ruhley/angular-color-picker)
 [![Code Climate](https://lima.codeclimate.com/github/ruhley/angular-color-picker/badges/gpa.svg)](https://lima.codeclimate.com/github/ruhley/angular-color-picker)
@@ -87,2 +86,3 @@
     restrictToFormat: [false, true],
+    preserveInputFormat: [false, true],
     allowEmpty: [false, true],
@@ -89,0 +89,0 @@ // color

src/scripts/controller.js

@@ -12,4 +12,6 @@ import tinycolor from 'tinycolor2';
 
+        // make the init function available from the $scope (for the directive link function)
         this.$scope.init = this.init.bind(this);
 
+        // set default values
         this.hue = 0;
@@ -26,4 +28,6 @@ this.saturation = undefined;
 
+        // sets the field to pristine or dirty for angular
         this.checkDirty(newValue);
 
+        // the mouse is still moving so don't do anything yet
         if (this.colorMouse) {
@@ -75,2 +79,12 @@ return;
 
+    setNgModel(value) {
+        this.internalNgModel = value;
+
+        if (this.ngModelOptions.getterSetter) {
+            this.ngModel(value);
+        } else {
+            this.ngModel = value;
+        }
+    }
+
     watchSwatchPos(newValue) {
@@ -86,3 +100,3 @@ if (newValue !== undefined) {
 
-    setupApi () {
+    setupApi() {
         if (!this.api) {
@@ -103,2 +117,3 @@ this.api = {};
 
+            // force redraw
             this.$scope.$applyAsync();
@@ -116,7 +131,3 @@
         this.api.close = (event) => {
-            if (
-                !this.options.inline &&
-                (this.is_open ||
-                this.$element[0].querySelector('.color-picker-panel').offsetParent !== null)
-            ) {
+            if (!this.options.inline && (this.is_open || this.$element[0].querySelector('.color-picker-panel').offsetParent !== null)) {
                 this.is_open = false;
@@ -130,4 +141,4 @@ this.$scope.$applyAsync();
         this.api.clear = (event) => {
-            if (this.ngModel !== '') {
-                this.ngModel = '';
+            if (this.internalNgModel !== '') {
+                this.setNgModel('');
 
@@ -139,4 +150,4 @@ this.eventApiDispatch('onClear', [event]);
         this.api.reset = (event) => {
-            if (this.ngModel !== this.initialNgModel) {
-                this.ngModel = this.initialNgModel;
+            if (this.internalNgModel !== this.initialNgModel) {
+                this.setNgModel(this.initialNgModel);
 
@@ -169,3 +180,8 @@ this.eventApiDispatch('onReset', [event]);
 
-    init () {
+    init() {
+        this.internalNgModel = this.ngModel;
+
+        // ng model options
+        this.ngModelOptions = this.$scope.control[0].$options.$$options;
+
         // browser variables
@@ -190,5 +206,7 @@ this.chrome = Boolean(window.chrome);
     initWatchers() {
+
         // ngModel
 
         this.$scope.$watch('AngularColorPickerController.ngModel', this.watchNgModel.bind(this));
+        this.$scope.$watch('AngularColorPickerController.internalNgModel', this.watchNgModel.bind(this));
 
@@ -206,2 +224,3 @@ // options
                 'AngularColorPickerController.options.restrictToFormat',
+                'AngularColorPickerController.options.preserveInputFormat',
                 'AngularColorPickerController.options.allowEmpty',
@@ -309,3 +328,3 @@ 'AngularColorPickerController.options.horizontal'
 
-    onMouseDown (event) {
+    onMouseDown(event) {
         this.has_moused_moved = false;
@@ -322,15 +341,15 @@
             this.$scope.$apply();
-        // mouse event on hue slider
+            // mouse event on hue slider
         } else if (event.target.classList.contains('color-picker-hue') || event.target.parentNode.classList.contains('color-picker-hue')) {
             this.hueDown(event);
             this.$scope.$apply();
-        // mouse event on saturation slider
+            // 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
+            // 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
+            // mouse event on opacity slider
         } else if (event.target.classList.contains('color-picker-opacity') || event.target.parentNode.classList.contains('color-picker-opacity')) {
@@ -342,3 +361,3 @@ this.opacityDown(event);
 
-    onMouseUp (event) {
+    onMouseUp(event) {
         // no current mouse events and not an element in the picker
@@ -351,3 +370,3 @@ if (!this.colorMouse && !this.hueMouse && !this.opacityMouse && this.find(event.target).length === 0) {
             this.$scope.$apply();
-        // mouse event on color grid
+            // mouse event on color grid
         } else if (this.colorMouse && this.has_moused_moved) {
@@ -357,3 +376,3 @@ this.colorUp(event);
             this.onChange(event);
-        // mouse event on hue slider
+            // mouse event on hue slider
         } else if (this.hueMouse && this.has_moused_moved) {
@@ -363,3 +382,3 @@ this.hueUp(event);
             this.onChange(event);
-        // mouse event on saturation slider
+            // mouse event on saturation slider
         } else if (this.saturationMouse && this.has_moused_moved) {
@@ -369,3 +388,3 @@ this.saturationUp(event);
             this.onChange(event);
-        // mouse event on lightness slider
+            // mouse event on lightness slider
         } else if (this.lightnessMouse && this.has_moused_moved) {
@@ -375,3 +394,3 @@ this.lightnessUp(event);
             this.onChange(event);
-        // mouse event on opacity slider
+            // mouse event on opacity slider
         } else if (this.opacityMouse && this.has_moused_moved) {
@@ -384,3 +403,3 @@ this.opacityUp(event);
 
-    onMouseMove (event) {
+    onMouseMove(event) {
         // mouse event on color grid
@@ -391,3 +410,3 @@ if (this.colorMouse) {
             this.$scope.$apply();
-        // mouse event on hue slider
+            // mouse event on hue slider
         } else if (this.hueMouse) {
@@ -397,3 +416,3 @@ this.has_moused_moved = true;
             this.$scope.$apply();
-        // mouse event on saturation slider
+            // mouse event on saturation slider
         } else if (this.saturationMouse) {
@@ -403,3 +422,3 @@ this.has_moused_moved = true;
             this.$scope.$apply();
-        // mouse event on lightness slider
+            // mouse event on lightness slider
         } else if (this.lightnessMouse) {
@@ -409,3 +428,3 @@ this.has_moused_moved = true;
             this.$scope.$apply();
-        // mouse event on opacity slider
+            // mouse event on opacity slider
         } else if (this.opacityMouse) {
@@ -418,3 +437,3 @@ this.has_moused_moved = true;
 
-    onKeyUp (event) {
+    onKeyUp(event) {
         // escape key
@@ -426,3 +445,3 @@ if (this.options.hide.escape && event.keyCode === 27) {
 
-    onColorClick (event) {
+    onColorClick(event) {
         if (!this.options.disabled && !this.has_moused_moved) {
@@ -436,3 +455,3 @@ this.colorChange(event);
 
-    onHueClick (event) {
+    onHueClick(event) {
         if (!this.options.disabled && !this.has_moused_moved) {
@@ -446,3 +465,3 @@ this.hueChange(event);
 
-    onSaturationClick (event) {
+    onSaturationClick(event) {
         if (!this.options.disabled && !this.has_moused_moved) {
@@ -456,3 +475,3 @@ this.saturationChange(event);
 
-    onLightnessClick (event) {
+    onLightnessClick(event) {
         if (!this.options.disabled && !this.has_moused_moved) {
@@ -466,3 +485,3 @@ this.lightnessChange(event);
 
-    onOpacityClick (event) {
+    onOpacityClick(event) {
         if (!this.options.disabled && !this.has_moused_moved) {
@@ -476,6 +495,6 @@ this.opacityChange(event);
 
-    onChange (event) {
+    onChange(event) {
         // don't fire if it hasn't actually changed
-        if (this.ngModel !== this.onChangeValue) {
-            this.onChangeValue = this.ngModel;
+        if (this.internalNgModel !== this.onChangeValue) {
+            this.onChangeValue = this.internalNgModel;
 
@@ -486,4 +505,4 @@ this.eventApiDispatch('onChange', [event]);
 
-    onBlur (event) {
-        if (this.ngModel !== this.onChangeValue) {
+    onBlur(event) {
+        if (this.internalNgModel !== this.onChangeValue) {
             this.updateModel = true;
@@ -503,3 +522,3 @@ this.update();
 
-    initConfig () {
+    initConfig() {
         if (!this.options) {
@@ -540,3 +559,3 @@ this.options = {};
 
-    onSwatchClick ($event) {
+    onSwatchClick($event) {
         if (this.options.show.swatch) {
@@ -547,3 +566,3 @@ this.api.open($event);
 
-    onFocus ($event) {
+    onFocus($event) {
         if (this.options.show.focus) {
@@ -554,3 +573,3 @@ this.api.open($event);
 
-    update () {
+    update() {
         if (this.hue === undefined || this.saturation === undefined || this.lightness === undefined) {
@@ -563,5 +582,13 @@ return false;
         if (this.options.round) {
-            color = tinycolor({h: this.hue, s: `${this.saturation}%`, l: `${this.lightness}%`});
+            color = tinycolor({
+                h: this.hue,
+                s: `${this.saturation}%`,
+                l: `${this.lightness}%`
+            });
         } else {
-            color = tinycolor({h: this.hue, s: `${this.saturation}%`, v: `${this.lightness}%`});
+            color = tinycolor({
+                h: this.hue,
+                s: `${this.saturation}%`,
+                v: `${this.lightness}%`
+            });
         }
@@ -585,6 +612,8 @@
 
-        if (this.updateModel) {
-            switch (this.options.format) {
+        var skipUpdate = this.options.preserveInputFormat && tinycolor(this.internalNgModel).toHsvString() === color.toHsvString();
+
+        if (this.updateModel && !skipUpdate) {
+            switch (this.options.format.toLowerCase()) {
                 case 'rgb':
-                    this.ngModel = color.toRgbString();
+                    this.setNgModel(color.toRgbString());
                     break;
@@ -594,5 +623,5 @@
                     if (this.options.case === 'lower') {
-                        this.ngModel = color.toHex().toLowerCase();
+                        this.setNgModel(color.toHex().toLowerCase());
                     } else {
-                        this.ngModel = color.toHex().toUpperCase();
+                        this.setNgModel(color.toHex().toUpperCase());
                     }
@@ -603,5 +632,5 @@ break;
                     if (this.options.case === 'lower') {
-                        this.ngModel = color.toHex8().toLowerCase();
+                        this.setNgModel(color.toHex8().toLowerCase());
                     } else {
-                        this.ngModel = color.toHex8().toUpperCase();
+                        this.setNgModel(color.toHex8().toUpperCase());
                     }
@@ -612,5 +641,5 @@ break;
                     if (this.options.case === 'lower') {
-                        this.ngModel = color.toHexString().toLowerCase();
+                        this.setNgModel(color.toHexString().toLowerCase());
                     } else {
-                        this.ngModel = color.toHexString().toUpperCase();
+                        this.setNgModel(color.toHexString().toUpperCase());
                     }
@@ -621,5 +650,5 @@ break;
                     if (this.options.case === 'lower') {
-                        this.ngModel = color.toHex8String().toLowerCase();
+                        this.setNgModel(color.toHex8String().toLowerCase());
                     } else {
-                        this.ngModel = color.toHex8String().toUpperCase();
+                        this.setNgModel(color.toHex8String().toUpperCase());
                     }
@@ -629,11 +658,11 @@ break;
                 case 'hsv':
-                    this.ngModel = color.toHsvString();
+                    this.setNgModel(color.toHsvString());
                     break;
 
                 case 'raw':
-                    this.ngModel = color.clone();
+                    this.setNgModel(color.clone());
                     break;
 
                 default:
-                    this.ngModel = color.toHslString();
+                    this.setNgModel(color.toHslString());
                     break;
@@ -644,3 +673,3 @@ }
 
-    updateSwatchBackground () {
+    updateSwatchBackground() {
         var el = angular.element(this.$element[0].querySelector('.color-picker-swatch'));
@@ -654,19 +683,19 @@ el.css({
 
-    huePosUpdate () {
+    huePosUpdate() {
         var el = angular.element(this.$element[0].querySelector('.color-picker-hue .color-picker-slider'));
 
         if (this.options.horizontal) {
-          el.css({
-              'left': (this.sliderDimensions.width * this.huePos / 100) + 'px',
-              'top': 0
-          });
+            el.css({
+                'left': (this.sliderDimensions.width * this.huePos / 100) + 'px',
+                'top': 0
+            });
         } else {
-          el.css({
-              'left': 0,
-              'top': (this.sliderDimensions.height * this.huePos / 100) + 'px'
-          });
+            el.css({
+                'left': 0,
+                'top': (this.sliderDimensions.height * this.huePos / 100) + 'px'
+            });
         }
     }
 
-    saturationPosUpdate () {
+    saturationPosUpdate() {
         var el;
@@ -685,15 +714,15 @@
         if (this.options.horizontal) {
-          el.css({
-              'left': (this.sliderDimensions.width * (100 - this.saturationPos) / 100) + 'px',
-              'top': 0
-          });
+            el.css({
+                'left': (this.sliderDimensions.width * (100 - this.saturationPos) / 100) + 'px',
+                'top': 0
+            });
         } else {
-          el.css({
-              'left': 0,
-              'top': (this.sliderDimensions.height * (100 - this.saturationPos) / 100) + 'px'
-          });
+            el.css({
+                'left': 0,
+                'top': (this.sliderDimensions.height * (100 - this.saturationPos) / 100) + 'px'
+            });
         }
     }
 
-    lightnessPosUpdate () {
+    lightnessPosUpdate() {
         var el;
@@ -705,3 +734,3 @@
             el.css({
-              'top': (this.pickerDimensions.width * this.lightnessPos / 100) + 'px'
+                'top': (this.pickerDimensions.width * this.lightnessPos / 100) + 'px'
             });
@@ -713,27 +742,27 @@ }
         if (this.options.horizontal) {
-          el.css({
-              'left': (this.sliderDimensions.width * this.lightnessPos / 100) + 'px',
-              'top': 0
-          });
+            el.css({
+                'left': (this.sliderDimensions.width * this.lightnessPos / 100) + 'px',
+                'top': 0
+            });
         } else {
-          el.css({
-              'left': 0,
-              'top': (this.sliderDimensions.height * this.lightnessPos / 100) + 'px'
-          });
+            el.css({
+                'left': 0,
+                'top': (this.sliderDimensions.height * this.lightnessPos / 100) + 'px'
+            });
         }
     }
 
-    opacityPosUpdate () {
+    opacityPosUpdate() {
         var el = angular.element(this.$element[0].querySelector('.color-picker-opacity .color-picker-slider'));
 
         if (this.options.horizontal) {
-          el.css({
-            'left': (this.sliderDimensions.width * this.opacityPos / 100) + 'px',
-            'top': 0
-          });
+            el.css({
+                'left': (this.sliderDimensions.width * this.opacityPos / 100) + 'px',
+                'top': 0
+            });
         } else {
-          el.css({
-            'left': 0,
-            'top': (this.sliderDimensions.height * this.opacityPos / 100) + 'px'
-          });
+            el.css({
+                'left': 0,
+                'top': (this.sliderDimensions.height * this.opacityPos / 100) + 'px'
+            });
         }
@@ -746,3 +775,3 @@ }
 
-    hueDown (event) {
+    hueDown(event) {
         this.stopEvent(event);
@@ -753,3 +782,3 @@
 
-    hueUp (event) {
+    hueUp(event) {
         this.stopEvent(event);
@@ -760,3 +789,3 @@
 
-    hueChange (event) {
+    hueChange(event) {
         this.stopEvent(event);
@@ -776,3 +805,3 @@
 
-    hueUpdate () {
+    hueUpdate() {
         if (this.hue !== undefined) {
@@ -801,3 +830,3 @@ this.huePos = (1 - (this.hue / 360)) * 100;
 
-    saturationDown (event) {
+    saturationDown(event) {
         this.stopEvent(event);
@@ -808,3 +837,3 @@
 
-    saturationUp (event) {
+    saturationUp(event) {
         this.stopEvent(event);
@@ -815,3 +844,3 @@
 
-    saturationChange (event) {
+    saturationChange(event) {
         this.stopEvent(event);
@@ -831,3 +860,3 @@
 
-    saturationUpdate () {
+    saturationUpdate() {
         if (this.saturation !== undefined) {
@@ -852,3 +881,3 @@ if (this.options.round) {
 
-    updateGridBackground (color) {
+    updateGridBackground(color) {
         var el = this.find('.color-picker-grid .color-picker-overlay');
@@ -888,5 +917,5 @@
 
-    updateHueBackground (color) {
+    updateHueBackground(color) {
         var el = this.find('.color-picker-hue .color-picker-overlay');
-        var direction = this.options.horizontal ? 'left': 'top';
+        var direction = this.options.horizontal ? 'left' : 'top';
 
@@ -911,15 +940,15 @@ var zero_sixths = this.getCurrentColorValue();
             'background': 'linear-gradient(to ' + direction + ', ' +
-            tinycolor(zero_sixths).toRgbString() + ' 0%, ' +
-            tinycolor(one_sixths).toRgbString() + ' 17%, ' +
-            tinycolor(two_sixths).toRgbString() + ' 33%, ' +
-            tinycolor(three_sixths).toRgbString() + ' 50%, ' +
-            tinycolor(four_sixths).toRgbString() + ' 67%, ' +
-            tinycolor(five_sixths).toRgbString() + ' 83%, ' +
-            tinycolor(six_sixths).toRgbString() + ' 100%)'
+                tinycolor(zero_sixths).toRgbString() + ' 0%, ' +
+                tinycolor(one_sixths).toRgbString() + ' 17%, ' +
+                tinycolor(two_sixths).toRgbString() + ' 33%, ' +
+                tinycolor(three_sixths).toRgbString() + ' 50%, ' +
+                tinycolor(four_sixths).toRgbString() + ' 67%, ' +
+                tinycolor(five_sixths).toRgbString() + ' 83%, ' +
+                tinycolor(six_sixths).toRgbString() + ' 100%)'
         });
     }
 
-    updateSaturationBackground (color) {
+    updateSaturationBackground(color) {
         var el = this.find('.color-picker-saturation .color-picker-overlay');
-        var direction = this.options.horizontal ? 'right': 'bottom';
+        var direction = this.options.horizontal ? 'right' : 'bottom';
         var high = this.getCurrentColorValue();
@@ -936,5 +965,5 @@ var low = this.getCurrentColorValue();
 
-    updateLightnessBackground (color) {
+    updateLightnessBackground(color) {
         var el = this.find('.color-picker-lightness .color-picker-overlay');
-        var direction = this.options.horizontal ? 'right': 'bottom';
+        var direction = this.options.horizontal ? 'right' : 'bottom';
         var bright = this.getCurrentColorValue();
@@ -959,5 +988,5 @@ var middle = this.getCurrentColorValue();
 
-    updateAlphaBackground (color) {
+    updateAlphaBackground(color) {
         var el = this.find('.color-picker-opacity .color-picker-overlay');
-        var direction = this.options.horizontal ? 'right': 'bottom';
+        var direction = this.options.horizontal ? 'right' : 'bottom';
         var opaque = this.getCurrentColorValue();
@@ -978,3 +1007,3 @@ var transparent = this.getCurrentColorValue();
 
-    lightnessDown (event) {
+    lightnessDown(event) {
         this.stopEvent(event);
@@ -985,3 +1014,3 @@
 
-    lightnessUp (event) {
+    lightnessUp(event) {
         this.stopEvent(event);
@@ -992,3 +1021,3 @@
 
-    lightnessChange (event) {
+    lightnessChange(event) {
         this.stopEvent(event);
@@ -1008,3 +1037,3 @@
 
-    lightnessUpdate () {
+    lightnessUpdate() {
         if (this.lightness !== undefined) {
@@ -1028,3 +1057,3 @@ this.lightnessPos = 100 - this.lightness;
 
-    opacityDown (event) {
+    opacityDown(event) {
         this.stopEvent(event);
@@ -1035,3 +1064,3 @@
 
-    opacityUp (event) {
+    opacityUp(event) {
         this.stopEvent(event);
@@ -1042,3 +1071,3 @@
 
-    opacityChange (event) {
+    opacityChange(event) {
         this.stopEvent(event);
@@ -1058,3 +1087,3 @@
 
-    opacityUpdate () {
+    opacityUpdate() {
         if (this.opacity !== undefined) {
@@ -1078,3 +1107,3 @@ this.opacityPos = (1 - (this.opacity / 100)) * 100;
 
-    colorDown (event) {
+    colorDown(event) {
         this.stopEvent(event);
@@ -1085,3 +1114,3 @@
 
-    colorUp (event) {
+    colorUp(event) {
         this.stopEvent(event);
@@ -1092,3 +1121,3 @@
 
-    colorChange (event) {
+    colorChange(event) {
         this.stopEvent(event);
@@ -1101,4 +1130,4 @@
         if (this.options.round) {
-            var dx = ((eventPos.pageX - offset.left) * 2.0  / el.prop('offsetWidth')) - 1.0;
-            var dy = -((eventPos.pageY - offset.top) * 2.0  / el.prop('offsetHeight')) + 1.0;
+            var dx = ((eventPos.pageX - offset.left) * 2.0 / el.prop('offsetWidth')) - 1.0;
+            var dy = -((eventPos.pageY - offset.top) * 2.0 / el.prop('offsetHeight')) + 1.0;
 
@@ -1239,3 +1268,3 @@ var tmpHue = Math.atan2(dy, dx);
                 return event.originalEvent.changedTouches[0];
-            // if a standard js touch event
+                // if a standard js touch event
             } else if (event.changedTouches) {
@@ -1251,7 +1280,7 @@ return event.changedTouches[0];
     calculateSliderPos(el, eventPos, multiplier) {
-      if (this.options.horizontal) {
-        return Math.round((1 - ((eventPos.pageX - this.offset(el).left) / el.prop('offsetWidth'))) * multiplier);
-      }
+        if (this.options.horizontal) {
+            return Math.round((1 - ((eventPos.pageX - this.offset(el).left) / el.prop('offsetWidth'))) * multiplier);
+        }
 
-      return Math.round((1 - ((eventPos.pageY - this.offset(el).top) / el.prop('offsetHeight'))) * multiplier);
+        return Math.round((1 - ((eventPos.pageY - this.offset(el).top) / el.prop('offsetHeight'))) * multiplier);
     }
@@ -1265,3 +1294,3 @@
 
-            args.unshift(this.ngModel);
+            args.unshift(this.internalNgModel);
             args.unshift(this.api);
@@ -1274,3 +1303,3 @@
     // taken and modified from jQuery's find
-    find (selector) {
+    find(selector) {
         var context = this.wrapper ? this.wrapper[0] : this.$element[0],
@@ -1303,3 +1332,3 @@ results = [],
     // taken and modified from jQuery's offset
-    offset (el) {
+    offset(el) {
         var docElem, win, rect, doc, elem = el[0];
@@ -1315,3 +1344,6 @@
         if (!elem.getClientRects().length) {
-            return {top: 0, left: 0};
+            return {
+                top: 0,
+                left: 0
+            };
         }
@@ -1322,3 +1354,3 @@
         // Make sure element is not hidden (display: none)
-        if ( rect.width || rect.height ) {
+        if (rect.width || rect.height) {
             doc = elem.ownerDocument;
@@ -1325,0 +1357,0 @@ win = doc !== null && doc === doc.window ? doc : doc.nodeType === 9 && doc.defaultView;

src/scripts/options-service.js

@@ -13,2 +13,3 @@ export default class AngularColorPickerOptions {
             restrictToFormat: false,
+            preserveInputFormat: false,
             allowEmpty: false,
@@ -15,0 +16,0 @@ // color

src/scripts/template.js

@@ -12,3 +12,3 @@ export default function template($templateCache) {
                '<span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' +
-               '<input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input {{AngularColorPickerController.options.inputClass}}" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required">' +
+               '<input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input {{AngularColorPickerController.options.inputClass}}" type="text" ng-model="AngularColorPickerController.internalNgModel" ng-model-options="AngularColorPickerController.ngModelOptions" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required">' +
                '<span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' +
@@ -15,0 +15,0 @@ '</div>' +

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

@@ -11,3 +11,3 @@ var Page = require('../page-object.js');
         it('Should allow any format by default', () => {
-            Page.format_field.$('[label="HEX"]').click();
+            Page.format_field.$('[label="HEXString"]').click();
             Page.input_field.clear().sendKeys('red');
@@ -22,3 +22,3 @@ Page.blurColorPicker();
 
-            Page.format_field.$('[label="HEX"]').click();
+            Page.format_field.$('[label="HEXString"]').click();
             Page.input_field.clear().sendKeys('green');
@@ -34,3 +34,3 @@ Page.blurColorPicker();
 
-            Page.format_field.$('[label="HEX"]').click();
+            Page.format_field.$('[label="HEXString"]').click();
             Page.input_field.clear().sendKeys('blue');
@@ -37,0 +37,0 @@ Page.blurColorPicker();

test/page-object.js

@@ -16,2 +16,3 @@
         this.restrict_to_format_field = element(by.model('options.restrictToFormat'));
+        this.preserve_input_format_field = element(by.model('options.preserveInputFormat'));
         this.allow_empty_field = element(by.model('options.allowEmpty'));
@@ -53,3 +54,3 @@
         this.color_picker = element(by.model('color'));
-        this.input_field = element(by.model('AngularColorPickerController.ngModel'));
+        this.input_field = element(by.model('AngularColorPickerController.internalNgModel'));
         this.color_picker_panel = element(by.css('.color-picker-panel'));
@@ -56,0 +57,0 @@ this.swatch = element(by.css('.color-picker-swatch'));

test/protractor-config.js

@@ -15,4 +15,6 @@ var fs = require("fs");
         selenium_server_jar = files[i];
-    } else if (/^chromedriver_[\d\.]+$/i.test(files[i])) {
+    } else if (/^chromedriver_[\d\.]+$/i.test(files[i])) { // linux
         chrome_driver = files[i];
+    } else if (/^chromedriver_[\d\.]+.exe$/i.test(files[i])) { // windows
+        chrome_driver = files[i];
     }
@@ -19,0 +21,0 @@ }

test/test-app.js

 angular
     .module('app', ['color.picker'])
     .controller('AppCtrl', function($scope) {
-        $scope.formatOptions = [{label: 'HSL', value: 'hsl'}, {label: 'HSV', value: 'hsv'}, {label: 'RGB', value: 'rgb'}, {label: 'HEX', value: 'hex'}, {label: 'HEX8', value: 'hex8'}, {label: 'Raw', value: 'raw'}];
+        $scope.formatOptions = [{label: 'HSL', value: 'hsl'}, {label: 'HSV', value: 'hsv'}, {label: 'RGB', value: 'rgb'}, {label: 'HEX', value: 'hex'}, {label: 'HEXString', value: 'hexstring'}, {label: 'HEX8', value: 'hex8'}, {label: 'Raw', value: 'raw'}];
         $scope.boolOptions = [{label: 'Yes', value: true}, {label: 'No', value: false}];
@@ -6,0 +6,0 @@ $scope.swatchPosOptions = [{label: 'Left', value: 'left'}, {label: 'Right', value: 'right'}];

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

342950

increased by2.25%

Number of package files

64

increased by3.23%

Lines of code

4317

increased by2.74%

No dependency changes