Fix bugs in color pickers, add a input colorpicker as well

Author: sp90

projects/design-system/src/app/ship/color-pickers/examples/base-color-picker/base-color-picker.html

@@ -1,4 +1,4 @@
-<sh-button-group [(value)]="renderingType">
+<sh-button-group [(value)]="renderingType" class="type-b">
   <button value="hsl">
     <sh-icon>circle</sh-icon>
     HSL Wheel
@@ -19,6 +19,10 @@
     <sh-icon>circle</sh-icon>
     Saturation
   </button>
+  <button value="alpha">
+    <sh-icon>circle</sh-icon>
+    Alpha
+  </button>
 </sh-button-group>
 
 @if (renderingType() === 'hsl') {
@@ -32,14 +36,10 @@
 </sh-range-slider>
  -->
 
-  <sh-color-picker renderingType="hue" (currentColor)="selectedHue.set($event.hue)"></sh-color-picker>
-}
-
-@if (renderingType() === 'hue') {
-  <sh-toggle [(checked)]="direction" color="primary" variant="raised">Direction</sh-toggle>
+  <sh-color-picker renderingType="hue" (currentColor)="selectedHue.set($event.hue)" />
 }
 
-@if (renderingType() === 'saturation') {
+@if (renderingType() === 'hue' || renderingType() === 'saturation' || renderingType() === 'alpha') {
   <sh-toggle [(checked)]="direction" color="primary" variant="raised">Direction</sh-toggle>
 }
 
@@ -48,17 +48,43 @@
   [showDarkColors]="showDarkColors()"
   [direction]="direction() ? 'vertical' : 'horizontal'"
   [hue]="selectedHue()"
-  (currentColor)="currentColor.set($event)"></sh-color-picker>
+  (currentColor)="currentColor.set($event)" />
 
 <div class="colors">
   <div class="swatch" [style.background]="currentColor()?.hex"></div>
 
   <div class="color-text">
     <p>RGB: {{ currentColor()?.rgb }}</p>
+    <p>RGBA: {{ currentColor()?.rgba }}</p>
     <p>HEX: {{ currentColor()?.hex }}</p>
+    <p>HEX8: {{ currentColor()?.hex8 }}</p>
     <p>HSL: {{ currentColor()?.hsl }}</p>
+    <p>HSLA: {{ currentColor()?.hsla }}</p>
     <p>Hue: {{ currentColor()?.hue }}</p>
     <p>Saturation: {{ currentColor()?.saturation }}</p>
+    <p>Alpha: {{ currentColor()?.alpha }}</p>
   </div>
 </div>
 <!-- <pre>{{ currentColor() | json }}</pre> -->
+
+<div class="example-element">
+  <h3>Color Picker Input Demo</h3>
+  <sh-toggle [(checked)]="showAlpha" color="primary" variant="raised">Enable Alpha</sh-toggle>
+  <sh-button-group [(value)]="inputRenderType" class="type-b">
+    <button value="hsl">HSL</button>
+    <button value="rgb">
+      <sh-icon>circle</sh-icon>
+      RGB
+    </button>
+    <button value="hex">
+      <sh-icon>circle</sh-icon>
+      Hex
+    </button>
+  </sh-button-group>
+
+  <sh-color-picker-input [format]="computedRenderType()" [renderingType]="inputRenderType() === 'hsl' ? 'hsl' : 'rgb'">
+    <label>Pick a color</label>
+    <input type="text" [value]="inputValue()" (input)="inputValue.set($any($event.target).value)" />
+  </sh-color-picker-input>
+  <p>Input Value: {{ inputValue() }}</p>
+</div>

projects/design-system/src/app/ship/color-pickers/examples/base-color-picker/base-color-picker.scss

@@ -29,3 +29,9 @@
     width: 100%;
   }
 }
+
+.example-element {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(12);
+}

projects/design-system/src/app/ship/color-pickers/examples/base-color-picker/base-color-picker.ts

@@ -1,18 +1,47 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ShipButtonGroup, ShipColorPicker, ShipIcon, ShipToggle } from 'ship-ui';
+import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
+import { ShipButtonGroup, ShipColorPicker, ShipColorPickerInput, ShipIcon, ShipToggle } from 'ship-ui';
 
 @Component({
   selector: 'app-base-color-picker',
-  imports: [ShipColorPicker, ShipButtonGroup, ShipIcon, ShipToggle],
+  imports: [ShipColorPicker, ShipButtonGroup, ShipIcon, ShipToggle, ShipColorPickerInput],
   templateUrl: './base-color-picker.html',
   styleUrl: './base-color-picker.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BaseColorPicker {
-  renderingType = signal<'hsl' | 'rgb' | 'grid' | 'hue' | 'saturation'>('hsl');
-  aColor = signal<[number, number, number]>([255, 255, 255]);
-  currentColor = signal<{ rgb: string; hex: string; hsl: string; hue: number; saturation: number } | null>(null);
+  renderingType = signal<'hsl' | 'rgb' | 'grid' | 'hue' | 'saturation' | 'alpha'>('hsl');
+  aColor = signal<[number, number, number, number?]>([255, 255, 255]);
+  currentColor = signal<{
+    rgb: string;
+    rgba: string;
+    hex: string;
+    hex8: string;
+    hsl: string;
+    hsla: string;
+    hue: number;
+    saturation: number;
+    alpha: number;
+  } | null>(null);
   showDarkColors = signal(false);
   direction = signal(false);
   selectedHue = signal(0);
+  inputValue = signal('rgba(255, 0, 0, 0.5)');
+
+  inputRenderType = signal<'hsl' | 'rgb' | 'hex'>('rgb');
+  showAlpha = signal(true);
+  computedRenderType = computed(() => {
+    const inputRenderType = this.inputRenderType();
+    const showAlpha = this.showAlpha();
+    if (inputRenderType === 'hsl') {
+      return showAlpha ? 'hsla' : 'hsl';
+    }
+    if (inputRenderType === 'rgb') {
+      return showAlpha ? 'rgba' : 'rgb';
+    }
+    if (inputRenderType === 'hex') {
+      return showAlpha ? 'hex8' : 'hex';
+    }
+
+    return 'hsl';
+  });
 }