fix(color-picker): update value when alphaChannel is toggled (#7563)

**Related Issue:** #7205 

## Summary

This updates the color picker to update its state properly when
`alphaChannel` is toggled.

packages/calcite-components/src/components/color-picker/color-picker.e2e.ts

@@ -1855,6 +1855,24 @@ describe("calcite-color-picker", () => {
           });
         });
       });
+
+      it("updates value when alphaChannel is toggled", async () => {
+        const page = await newE2EPage();
+        await page.setContent(
+          `<calcite-color-picker value="${supportedFormatToSampleValue.hex}"></calcite-color-picker>`
+        );
+        const color = await page.find("calcite-color-picker");
+
+        await color.setProperty("alphaChannel", true);
+        await page.waitForChanges();
+
+        expect(await color.getProperty("value")).toEqual(supportedAlphaFormatToSampleValue.hexa);
+
+        await color.setProperty("alphaChannel", false);
+        await page.waitForChanges();
+
+        expect(await color.getProperty("value")).toEqual(supportedFormatToSampleValue.hex);
+      });
     });
   });
 

packages/calcite-components/src/components/color-picker/color-picker.tsx

@@ -146,9 +146,10 @@ export class ColorPicker
    */
   @Prop({ reflect: true }) format: Format = "auto";
 
+  @Watch("alphaChannel")
   @Watch("format")
-  handleFormatChange(format: Format): void {
-    this.setMode(format);
+  handleFormatOrAlphaChannelChange(): void {
+    this.setMode(this.format);
     this.internalColorSet(this.color, false, "internal");
   }
 
@@ -1311,6 +1312,10 @@ export class ColorPicker
   };
 
   private initOpacitySlider = (canvas: HTMLCanvasElement): void => {
+    if (!canvas) {
+      return;
+    }
+
     this.opacitySliderRenderingContext = canvas.getContext("2d");
     this.updateCanvasSize("opacity-slider");
     this.drawOpacitySlider();