Brought back the auto value for the output format

README.md

@@ -70,7 +70,7 @@ import { ColorPickerModule } from 'ngx-color-picker';
 [cpToggle]                   // Sets the default open / close state of the color picker (false).
 [cpDisabled]                 // Disables opening of the color picker dialog via toggle / events.
 
-[cpOutputFormat]             // Output color format: 'hex', 'rgba', 'hsla' ('hex').
+[cpOutputFormat]             // Output color format: 'auto', 'hex', 'rgba', 'hsla' ('auto').
 [cpAlphaChannel]             // Alpha in output value: 'enabled', 'disabled', 'always' ('enabled').
 [cpFallbackColor]            // Is used when the color is not well-formed or is undefined ('#000').
 

example/src/app/app.component.html

@@ -357,7 +357,7 @@ <h4><b>based on angular2-color-picker by Alberto Pujante</b></h4>
           <tr>
             <td>cpOutputFormat</td>
             <td>
-              <b>'hex'</b>, 'rgba', 'hsla'
+              <b>'auto'</b>, 'hex', 'rgba', 'hsla'
             </td>
           </tr>
 

src/lib/color-picker.component.ts

@@ -130,6 +130,10 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
       this.format = 0;
     }
 
+    if (this.cpOutputFormat === 'auto') {
+      this.cpOutputFormat = (this.cpAlphaChannel !== 'disabled') ? 'rgba' : 'hex';
+    }
+
     this.listenerMouseDown = (event: any) => { this.onMouseDown(event); };
     this.listenerResize = () => { this.onResize(); };
 
@@ -241,7 +245,7 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
       this.dialogArrowOffset = 0;
     }
 
-    if (cpOutputFormat === 'hex' && cpAlphaChannel !== 'always' && cpAlphaChannel !== 'hex8') {
+    if (cpOutputFormat === 'hex' && cpAlphaChannel !== 'always') {
       this.cpAlphaChannel = 'disabled';
     }
   }
@@ -258,7 +262,7 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
   public setColorFromString(value: string, emit: boolean = true, update: boolean = true): void {
     let hsva: Hsva | null;
 
-    if (this.cpAlphaChannel === 'always' || this.cpAlphaChannel === 'hex8') {
+    if (this.cpAlphaChannel === 'always') {
       hsva = this.service.stringToHsva(value, true);
 
       if (!hsva && !this.hsva) {
@@ -590,7 +594,7 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
 
         this.rgbaText = new Rgba(rgba.r, rgba.g, rgba.b, Math.round(rgba.a * 100) / 100);
 
-        const allowHex8 = this.cpAlphaChannel === 'always' || this.cpAlphaChannel === 'hex8';
+        const allowHex8 = this.cpAlphaChannel === 'always';
 
         this.hexText = this.service.rgbaToHex(rgba, allowHex8);
       }

src/lib/color-picker.directive.ts

@@ -29,8 +29,8 @@ export class ColorPickerDirective implements OnChanges, OnDestroy {
 
   @Input() cpDisableInput: boolean = false;
 
+  @Input() cpOutputFormat: string = 'auto';
   @Input() cpAlphaChannel: string = 'enabled';
-  @Input() cpOutputFormat: string = 'hex';
 
   @Input() cpFallbackColor: string = '#fff';
 
@@ -120,7 +120,7 @@ export class ColorPickerDirective implements OnChanges, OnDestroy {
         }
 
         this.dialog.setColorFromString(changes.colorPicker.currentValue, false);
-        
+
         if (this.cpUseRootViewContainer && this.cpDialogDisplay !== 'inline') {
           this.cmpRef.changeDetectorRef.detectChanges();
         }