@umbraco-ui/uui-color-picker 1.8.0 → 1.9.0-rc.0

package/lib/index.js

@@ -29,8 +29,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 k([namesPlugin]);
@@ -38,13 +37,13 @@ const hasEyeDropper = "EyeDropper" in window;
 let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
   constructor() {
     super(...arguments);
+    this._value = "";
     this.inputValue = "";
     this.hue = 0;
     this.saturation = 0;
     this.lightness = 0;
-    this.alpha = 100;
+    this.alpha = 0;
     this._colord = w("hsl(0, 0%, 0%)");
-    this.value = "";
     this.format = "hex";
     this.name = "";
     this.size = "medium";
@@ -72,13 +71,17 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
       "#fff"
     ];
   }
+  set value(value) {
+    if (this.value !== value) {
+      this.setColor(value);
+    }
+    this._value = value;
+  }
+  get value() {
+    return this._value;
+  }
   connectedCallback() {
     super.connectedCallback();
-    if (this.value) {
-      this.setColor(this.value);
-    } else {
-      this.setColor("#000");
-    }
     demandCustomElement(this, "uui-icon");
     demandCustomElement(this, "uui-icon-registry-essential");
     demandCustomElement(this, "uui-input");
@@ -173,36 +176,24 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     this.setColor(newColor);
   }
   handleInputChange(event) {
+    event.stopImmediatePropagation();
     this._swatches?.resetSelection();
-    const target = event.target;
-    if (target.value) {
-      this.setColor(target.value);
-      target.value = this.value;
-    } else {
-      this.setColor("#000");
-    }
-    event.stopPropagation();
+    this.inputValue = this._input.value;
+    this.setColor(this.inputValue);
   }
   handleInputKeyDown(event) {
+    event.stopImmediatePropagation();
     if (event.key === "Enter") {
-      if (this.inputValue) {
-        this.setColor(this.inputValue);
-        this._swatches?.resetSelection();
-        this.inputValue = this.value;
-        setTimeout(() => this._input.select());
-      } else {
-        this.setColor("#000");
-      }
+      this._swatches?.resetSelection();
+      this.inputValue = this._input.value;
+      this.setColor(this.inputValue);
+      setTimeout(() => this._input.select());
     }
   }
   handleColorSwatchChange(event) {
     event.stopImmediatePropagation();
     const target = event.target;
-    if (target.value) {
-      this.setColor(target.value);
-    } else {
-      this.setColor("#000");
-    }
+    this.setColor(target.value);
   }
   handleCopy() {
     navigator.clipboard.writeText(this._input.value).then(() => {
@@ -223,6 +214,16 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     });
   }
   setColor(colorString) {
+    if (colorString === this.value) return;
+    if (!colorString) {
+      this.alpha = 0;
+      this.inputValue = "";
+      this._value = colorString;
+      this.dispatchEvent(
+        new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE)
+      );
+      return true;
+    }
     const colord2 = new j(colorString);
     const { h, s, l, a } = colord2.toHsl();
     this.hue = h;
@@ -258,7 +259,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
   }
   _syncValues() {
     this.inputValue = this.getFormattedValue(this.format);
-    this.value = this.inputValue;
+    this._value = this.inputValue;
   }
   _renderColorPicker() {
     return html`
@@ -350,11 +351,11 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     `;
   }
   _renderSwatches() {
-    if (!this.swatches)
-      return nothing;
+    if (!this.swatches) return nothing;
     return html`<uui-color-swatches
       id="swatches"
       class="color-picker__swatches"
+      label="Swatches"
       ?disabled=${this.disabled}
       @change=${this.handleColorSwatchChange}>
       ${this.swatches.map(
@@ -364,7 +365,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     </uui-color-swatches>`;
   }
   _renderPreviewButton() {
-    return html` <button
+    return html`<button
         type="button"
         part="trigger"
         aria-label="${this.label || "Open Color picker"}"
@@ -565,7 +566,7 @@ __decorateClass([
 ], UUIColorPickerElement.prototype, "_colord", 2);
 __decorateClass([
   property()
-], UUIColorPickerElement.prototype, "value", 2);
+], UUIColorPickerElement.prototype, "value", 1);
 __decorateClass([
   property()
 ], UUIColorPickerElement.prototype, "format", 2);

package/lib/uui-color-picker.element.d.ts

@@ -2,8 +2,7 @@ import { LitElement } from 'lit';
 import { HslaColor } from 'colord';
 import type { UUIColorAreaEvent } from '@umbraco-ui/uui-color-area/lib';
 import type { UUIColorSliderEvent } from '@umbraco-ui/uui-color-slider/lib';
-import type { UUIColorSwatchesElement, UUIColorSwatchesEvent } from '@umbraco-ui/uui-color-swatches/lib';
-import type { UUIInputElement } from '@umbraco-ui/uui-input/lib';
+import type { UUIColorSwatchesEvent } from '@umbraco-ui/uui-color-swatches/lib';
 export type UUIColorPickerFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
 export type UUIColorPickerFormatWithAlpha = UUIColorPickerFormat | 'hexa' | 'rgba' | 'hsla' | 'hsva';
 type UUIColorPickerSize = 'small' | 'medium' | 'large';
@@ -15,9 +14,10 @@ declare const UUIColorPickerElement_base: (new (...args: any[]) => import("@umbr
  * @fires {UUIColorPickerChangeEvent} change - Fired when the color changes
  */
 export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
-    _input: UUIInputElement;
-    _previewButton: HTMLButtonElement;
-    _swatches: UUIColorSwatchesElement;
+    private _input;
+    private _previewButton;
+    private _swatches;
+    private _value;
     private inputValue;
     private hue;
     private saturation;
@@ -30,7 +30,8 @@ export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
      * @type {string}
      * @default ''
      **/
-    value: string;
+    set value(value: string);
+    get value(): string;
     /**
      * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA
      * respectively. The color picker will always accept user input in any format (including CSS color names) and convert
@@ -108,7 +109,7 @@ export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
     handleColorSwatchChange(event: UUIColorSwatchesEvent): void;
     handleCopy(): void;
     handleEyeDropper(): void;
-    setColor(colorString: string | HslaColor): boolean;
+    setColor(colorString: string | HslaColor): true | undefined;
     setLetterCase(string: string): string;
     /** Generates a hex string from HSL values. Hue must be 0-360. All other arguments must be 0-100. */
     private getHexString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-color-picker",
-  "version": "1.8.0",
+  "version": "1.9.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,8 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.8.0",
-    "@umbraco-ui/uui-popover-container": "1.8.0",
+    "@umbraco-ui/uui-base": "1.9.0-rc.0",
+    "@umbraco-ui/uui-popover-container": "1.9.0-rc.0",
     "colord": "^2.9.3"
   },
   "scripts": {
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-color-picker",
-  "gitHead": "53021762a52dc54a46f0c5ef829c1cbaabde1160"
+  "gitHead": "e3e398e07b6ff9874aa0656cb7767df42f58a4ce"
 }