Make the format arrow buttons switch up and down as indicated

Adds two small areas under the image, to fake the actual arrow buttons.
Fixes #149

Author: zlepper

src/lib/color-picker.component.css

@@ -318,6 +318,13 @@
   background-position: center;
 }
 
+.color-picker .type-policy .type-policy-arrow {
+  display: block;
+
+  width: 100%;
+  height: 50%;
+}
+
 .color-picker .selected-color {
   position: absolute;
   top: 16px;

src/lib/color-picker.component.html

@@ -83,7 +83,10 @@
     </div>
   </div>
 
-  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1" class="type-policy" (click)="onFormatToggle()"></div>
+  <div *ngIf="!cpDisableInput && (cpColorMode || 1) === 1" class="type-policy">
+    <span class="type-policy-arrow" (click)="onFormatToggle(1)"></span>
+    <span class="type-policy-arrow" (click)="onFormatToggle(-1)"></span>
+  </div>
 
   <div *ngIf="cpPresetColors?.length || cpAddColorButton" class="preset-area">
     <hr>

src/lib/color-picker.component.ts

@@ -381,8 +381,13 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
     this.directiveInstance.colorCanceled();
   }
 
-  public onFormatToggle(): void {
-    const nextFormat = (this.dialogInputFields.indexOf(this.format) + 1) % this.dialogInputFields.length;
+  public onFormatToggle(change: number): void {
+
+    const availableFormats = this.dialogInputFields.length;
+    // Javascript modulo operation doesn't work that well with negative numbers, so we have to take
+    // things a bit further to get the proper behavior for negative wrap around.
+    const nextFormat = (((this.dialogInputFields.indexOf(this.format) + change) % availableFormats)
+        + availableFormats) % availableFormats;
 
     this.format = this.dialogInputFields[nextFormat];
   }