Fixed merge conflicts from the 4.x.x merge

zefoy · Nov 22, 2017 · 6c3451d · 6c3451d
2 parents 5a1a3a1 + 495d5a0
commit 6c3451d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "description": "Color picker widget for Angular",
   "bugs": "https://github.com/zefoy/ngx-color-picker/issues",
   "license": "MIT",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "main": "./bundles/ngx-color-picker.umd.js",
   "module": "./dist/ngx-color-picker.es5.js",
   "typings": "./dist/ngx-color-picker.d.ts",

diff --git a/src/lib/color-picker.component.html b/src/lib/color-picker.component.html
@@ -8,10 +8,10 @@
         <div class="left">
             <div class="selected-color-background"></div>
             <div [style.background-color]="selectedColor" class="selected-color"></div>
-            <button 
-                *ngIf="cpAddColorButton" 
-                class="{{cpAddColorButtonClass}}" 
-                (click)="addPresetColor(selectedColor)" 
+            <button
+                *ngIf="cpAddColorButton"
+                class="{{cpAddColorButtonClass}}"
+                (click)="addPresetColor(selectedColor)"
                 [disabled]="cpPresetColors && cpPresetColors.length >= cpMaxPresetColorsLength">
                 {{cpAddColorButtonText}}
             </button>
@@ -55,7 +55,7 @@
 
     <div [style.display]="format !== 0 ? 'none' : 'block'" class="hex-text">
         <div class="box">
-            <input [text] (newValue)="setHex($event)" [value]="hexText"/>
+            <input [text] (blur)="setHex(null)" (newValue)="setHex($event)" [value]="hexText"/>
         </div>
         <div class="box">
             <div>Hex</div>

diff --git a/src/lib/color-picker.component.ts b/src/lib/color-picker.component.ts
@@ -201,7 +201,7 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
         }
     }
 
-    setColorFromString(value: string, emit: boolean = true) {
+    setColorFromString(value: string, emit: boolean = true, update: boolean = true) {
         let hsva: Hsva;
         if (this.cpAlphaChannel === 'always' || this.cpAlphaChannel === 'hex8') {
             hsva = this.service.stringToHsva(value, true);
@@ -213,7 +213,7 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
         }
         if (hsva) {
             this.hsva = hsva;
-            this.update(emit);
+            this.update(emit, update);
         }
     }
 
@@ -418,9 +418,13 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
     }
 
     setHex(val: string) {
-      this.setColorFromString(val);
+      if (val === null) {
+        this.update();
+      } else {
+        this.setColorFromString(val, true, false);
 
-      this.directiveInstance.inputChanged({input: 'hex', value: val, color: this.outputColor});
+        this.directiveInstance.inputChanged({input: 'hex', value: val, color: this.outputColor});
+      }
     }
 
     setSaturationAndBrightness(val: { s: number, v: number, rgX: number, rgY: number }) {
@@ -436,15 +440,17 @@ export class ColorPickerComponent implements OnInit, AfterViewInit {
         return this.format;
     }
 
-    update(emit: boolean = true) {
+    update(emit: boolean = true, update: boolean = true) {
         if (this.sliderDimMax) {
             let hsla = this.service.hsva2hsla(this.hsva);
             let rgba = this.service.denormalizeRGBA(this.service.hsvaToRgba(this.hsva));
             let hueRgba = this.service.denormalizeRGBA(this.service.hsvaToRgba(new Hsva(this.hsva.h, 1, 1, 1)));
 
-            this.hslaText = new Hsla(Math.round((hsla.h) * 360), Math.round(hsla.s * 100), Math.round(hsla.l * 100), Math.round(hsla.a * 100) / 100);
-            this.rgbaText = new Rgba(rgba.r, rgba.g, rgba.b, Math.round(rgba.a * 100) / 100);
-            this.hexText = this.service.hexText(rgba, this.cpAlphaChannel === 'always' || this.cpAlphaChannel === 'hex8');
+            if (update) {
+              this.hslaText = new Hsla(Math.round((hsla.h) * 360), Math.round(hsla.s * 100), Math.round(hsla.l * 100), Math.round(hsla.a * 100) / 100);
+              this.rgbaText = new Rgba(rgba.r, rgba.g, rgba.b, Math.round(rgba.a * 100) / 100);
+              this.hexText = this.service.hexText(rgba, this.cpAlphaChannel === 'always' || this.cpAlphaChannel === 'hex8');
+            }
 
             this.alphaSliderColor = 'rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')';
             this.hueSliderColor = 'rgb(' + hueRgba.r + ',' + hueRgba.g + ',' + hueRgba.b + ')';