From 82186999ae5d340e4acac65c8775d12cebd889ed Mon Sep 17 00:00:00 2001
From: Janne Julkunen <janne.julkunen@zef.fi>
Date: Mon, 12 Nov 2018 21:59:27 +0200
Subject: [PATCH] Always use sane default for the color mode

---
 src/lib/color-picker.component.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/lib/color-picker.component.html b/src/lib/color-picker.component.html
index 5912941..8fa3abe 100644
--- a/src/lib/color-picker.component.html
+++ b/src/lib/color-picker.component.html
@@ -1,7 +1,7 @@
 <div #dialogPopup class="color-picker" [style.visibility]="hidden || !show ? 'hidden' : 'visible'" [style.top.px]="top" [style.left.px]="left" [style.position]="position" [style.height.px]="cpHeight" [style.width.px]="cpWidth" (click)="$event.stopPropagation()">
   <div *ngIf="cpDialogDisplay=='popup'" class="arrow arrow-{{cpPosition}}" [style.top.px]="arrowTop"></div>
 
-  <div *ngIf="cpColorMode === 1" class="saturation-lightness" [slider] [rgX]="1" [rgY]="1" [style.background-color]="hueSliderColor" (newValue)="onColorChange($event)" (dragStart)="onDragStart('saturation-lightness')" (dragEnd)="onDragEnd('saturation-lightness')">
+  <div *ngIf="(cpColorMode || 1) === 1" class="saturation-lightness" [slider] [rgX]="1" [rgY]="1" [style.background-color]="hueSliderColor" (newValue)="onColorChange($event)" (dragStart)="onDragStart('saturation-lightness')" (dragEnd)="onDragEnd('saturation-lightness')">
     <div class="cursor" [style.top.px]="slider.v" [style.left.px]="slider.s"></div>
   </div>
 
@@ -19,11 +19,11 @@
     <div class="right">
       <div *ngIf="cpAlphaChannel==='disabled'" style="height: 16px;"></div>
 
-      <div #hueSlider class="hue" [slider] [rgX]="1" [style.display]="cpColorMode === 1 ? 'block' : 'none'" (newValue)="onHueChange($event)" (dragStart)="onDragStart('hue')" (dragEnd)="onDragEnd('hue')">
+      <div #hueSlider class="hue" [slider] [rgX]="1" [style.display]="(cpColorMode || 1) === 1 ? 'block' : 'none'" (newValue)="onHueChange($event)" (dragStart)="onDragStart('hue')" (dragEnd)="onDragEnd('hue')">
         <div class="cursor" [style.left.px]="slider.h"></div>
       </div>
 
-      <div #valueSlider class="value" [slider] [rgX]="1" [style.display]="cpColorMode === 2 ? 'block': 'none'" (newValue)="onValueChange($event)" (dragStart)="onDragStart('value')" (dragEnd)="onDragEnd('value')">
+      <div #valueSlider class="value" [slider] [rgX]="1" [style.display]="(cpColorMode || 1) === 2 ? 'block': 'none'" (newValue)="onValueChange($event)" (dragStart)="onDragStart('value')" (dragEnd)="onDragEnd('value')">
         <div class="cursor" [style.right.px]="slider.v"></div>
       </div>
 
@@ -33,7 +33,7 @@
     </div>
   </div>
 
-  <div *ngIf="!cpDisableInput && cpColorMode === 1 " class="hsla-text" [style.display]="format !== 2 ? 'none' : 'block'">
+  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1 " class="hsla-text" [style.display]="format !== 2 ? 'none' : 'block'">
     <div class="box">
       <input type="number" pattern="[0-9]*" min="0" max="360" [text] [rg]="360" [value]="hslaText?.h" (keyup.enter)="onAcceptColor($event)" (newValue)="onHueInput($event)" />
       <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="hslaText?.s" (keyup.enter)="onAcceptColor($event)" (newValue)="onSaturationInput($event)" />
@@ -46,7 +46,7 @@
     </div>
   </div>
 
-  <div *ngIf="!cpDisableInput && cpColorMode === 1 " [style.display]="format !== 1 ? 'none' : 'block'" class="rgba-text">
+  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1 " [style.display]="format !== 1 ? 'none' : 'block'" class="rgba-text">
     <div class="box">
       <input type="number" pattern="[0-9]*" min="0" max="255" [text] [rg]="255" [value]="rgbaText?.r" (keyup.enter)="onAcceptColor($event)" (newValue)="onRedInput($event)" />
       <input type="number" pattern="[0-9]*" min="0" max="255" [text] [rg]="255" [value]="rgbaText?.g" (keyup.enter)="onAcceptColor($event)" (newValue)="onGreenInput($event)" />
@@ -59,7 +59,7 @@
     </div>
   </div>
 
-  <div *ngIf="!cpDisableInput && cpColorMode === 1" class="hex-text" [class.hex-alpha]="cpAlphaChannel==='forced'"
+  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1" class="hex-text" [class.hex-alpha]="cpAlphaChannel==='forced'"
     [style.display]="format !== 0 ? 'none' : 'block'">
     <div class="box">
       <input [text] [value]="hexText" (blur)="onHexInput(null)" (keyup.enter)="onAcceptColor($event)" (newValue)="onHexInput($event)"/>
@@ -72,7 +72,7 @@
     </div>
   </div>
 
-  <div *ngIf="!cpDisableInput && cpColorMode === 2" class="value-text">
+  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 2" class="value-text">
     <div class="box">
       <input type="number" pattern="[0-9]*" min="0" max="100" [text] [rg]="100" [value]="hslaText?.l" (keyup.enter)="onAcceptColor($event)" (newValue)="onValueInput($event)" />
       <input *ngIf="cpAlphaChannel!=='disabled'" type="number" pattern="[0-9]+([\.,][0-9]{1,2})?" min="0" max="1" step="0.1"  [text] [rg]="1" [value]="hslaText?.a" (keyup.enter)="onAcceptColor($event)" (newValue)="onAlphaInput($event)" />
@@ -83,7 +83,7 @@
     </div>
   </div>
 
-  <div *ngIf="!cpDisableInput && cpColorMode === 1" class="type-policy" (click)="onFormatToggle()"></div>
+  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1" class="type-policy" (click)="onFormatToggle()"></div>
 
   <div *ngIf="cpPresetColors?.length || cpAddColorButton" class="preset-area">
     <hr>