@umbraco-ui/uui-color-picker 1.4.0 → 1.5.0-rc.1

package/custom-elements.json

@@ -13,7 +13,7 @@
         },
         {
           "name": "format",
-          "description": "The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA\nrespectively. The color picker will always accept user input in any format (including CSS color names) and convert\nit to the desired format.",
+          "description": "The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA\nrespectively. The color picker will always accept user input in any format (including CSS color names) and convert\nit to the desired format.",
           "type": "UUIColorPickerFormat",
           "default": "\"'hex'\""
         },
@@ -66,11 +66,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "styles",
-          "type": "CSSResult[]",
-          "default": "[null]"
-        },
         {
           "name": "value",
           "attribute": "value",
@@ -81,7 +76,7 @@
         {
           "name": "format",
           "attribute": "format",
-          "description": "The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA\nrespectively. The color picker will always accept user input in any format (including CSS color names) and convert\nit to the desired format.",
+          "description": "The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, HSLA, and HSVA\nrespectively. The color picker will always accept user input in any format (including CSS color names) and convert\nit to the desired format.",
           "type": "UUIColorPickerFormat",
           "default": "\"'hex'\""
         },
@@ -136,10 +131,15 @@
         },
         {
           "name": "swatches",
-          "description": "An array of predefined color swatches to display. Can include any format the color picker can parse, including\nHEX(A), RGB(A), HSL(A), and CSS color names.",
+          "description": "An array of predefined color swatches to display. Can include any format the color picker can parse, including\nHEX(A), RGB(A), HSL(A), HSV(A), and CSS color names.",
           "type": "string[]",
           "default": "[\"#d0021b\",\"#f5a623\",\"#f8e71c\",\"#8b572a\",\"#7ed321\",\"#417505\",\"#bd10e0\",\"#9013fe\",\"#4a90e2\",\"#50e3c2\",\"#b8e986\",\"#000\",\"#444\",\"#888\",\"#ccc\",\"#fff\"]"
         },
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
         {
           "name": "label",
           "attribute": "label",

package/lib/index.js

@@ -106,25 +106,29 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
   /** Returns the current value as a string in the specified format. */
   getFormattedValue(format) {
     const formatToUse = this.opacity ? `${format}a` : format;
-    const { h, l, s } = this._colord.toHsl();
+    const hexa = this._colord.toHex();
+    const hex = hexa.length > 7 ? hexa.substring(0, hexa.length - 2) : hexa;
     const { r, g, b } = this._colord.toRgb();
-    const hexa = this.setLetterCase(this._colord.toHex());
-    const hex = this.setLetterCase(
-      hexa.length > 7 ? hexa.substring(0, hexa.length - 2) : hexa
-    );
+    const { h, s, l } = this._colord.toHsl();
+    const { v } = this._colord.toHsv();
+    const a = this._colord.alpha();
     switch (formatToUse) {
       case "hex":
-        return hex;
+        return this.setLetterCase(hex);
       case "hexa":
-        return hexa;
+        return this.setLetterCase(hexa);
       case "rgb":
-        return `rgb(${r} ${g} ${b})`;
+        return this.setLetterCase(`rgb(${r}, ${g}, ${b})`);
       case "rgba":
-        return this._colord.toRgbString();
+        return this.setLetterCase(this._colord.toRgbString());
       case "hsl":
-        return `hsl(${h} ${s} ${l})`;
+        return this.setLetterCase(`hsl(${h}, ${s}%, ${l}%)`);
       case "hsla":
-        return this._colord.toHslString();
+        return this.setLetterCase(this._colord.toHslString());
+      case "hsv":
+        return this.setLetterCase(`hsv(${h}, ${s}%, ${l}%)`);
+      case "hsva":
+        return this.setLetterCase(`hsva(${h}, ${s}%, ${v}%, ${a})`);
       default:
         return "";
     }
@@ -140,7 +144,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     );
   }
   handleFormatToggle() {
-    const formats = ["hex", "rgb", "hsl"];
+    const formats = ["hex", "rgb", "hsl", "hsv"];
     const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
     this.format = formats[nextIndex];
     this._syncValues();
@@ -231,13 +235,13 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
   openColorPicker(event) {
     event.stopImmediatePropagation();
     const target = event.target;
-    const popover = target.nextElementSibling;
+    const popover = target.parentElement;
     popover.open = !(popover == null ? void 0 : popover.open);
     target.setAttribute("aria-expanded", popover.open.toString());
   }
   closeColorPicker(event) {
     const target = event.target;
-    const trigger = target.previousElementSibling;
+    const trigger = target.querySelector("button[part=trigger]");
     if (trigger) {
       trigger.setAttribute("aria-expanded", "false");
     }
@@ -282,7 +286,10 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
       "color-picker--disabled": this.disabled
     })}
         aria-disabled=${this.disabled ? "true" : "false"}>
-        <uui-color-area .value="${this.value}" @change=${this.handleGridChange}>
+        <uui-color-area
+          .value="${this.value}"
+          ?disabled=${this.disabled}
+          @change=${this.handleGridChange}>
         </uui-color-area>
         <div class="color-picker__controls">
           <div class="color-picker__sliders">
@@ -290,6 +297,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
               label="hue"
               class="hue-slider"
               .value=${Math.round(this.hue)}
+              ?disabled=${this.disabled}
               @change=${this.handleHueChange}>
             </uui-color-slider>
             ${this.opacity ? html`
@@ -299,6 +307,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
                     .value=${Math.round(this.alpha)}
                     type="opacity"
                     .color=${this.value}
+                    ?disabled=${this.disabled}
                     @change=${this.handleAlphaChange}>
                   </uui-color-slider>
                 ` : ""}
@@ -329,19 +338,19 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
             @change=${this.handleInputChange}>
           </uui-input>
           <uui-button-group>
-            ${!this.noFormatToggle ? html`
-                  <uui-button
-                    label="Toggle color format"
-                    @click=${this.handleFormatToggle}
-                    class="color-picker__toggle-format"
-                    compact>
-                    <span>${this.format}</span>
-                  </uui-button>
-                ` : ""}
-            ${hasEyeDropper ? html` <uui-button
+            ${!this.noFormatToggle ? html`<uui-button
+                  label="Toggle color format"
+                  @click=${this.handleFormatToggle}
+                  class="color-picker__toggle-format"
+                  ?disabled=${this.disabled}
+                  compact>
+                  <span>${this.format}</span>
+                </uui-button>` : ""}
+            ${hasEyeDropper ? html`<uui-button
                   label="Select a color"
-                  compact
-                  @click=${this.handleEyeDropper}>
+                  ?disabled=${this.disabled}
+                  @click=${this.handleEyeDropper}
+                  compact>
                   <uui-icon-registry-essential>
                     <uui-icon name="colorpicker"></uui-icon>
                   </uui-icon-registry-essential>
@@ -358,17 +367,21 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     return html`<uui-color-swatches
       id="swatches"
       class="color-picker__swatches"
+      ?disabled=${this.disabled}
       @change=${this.handleColorSwatchChange}>
       ${this.swatches.map(
-      (swatch) => html`<uui-color-swatch
-            label="${swatch}"
-            .value=${swatch}></uui-color-swatch>`
+      (swatch) => html`<uui-color-swatch label="${swatch}" .value=${swatch}>
+          </uui-color-swatch>`
     )}
     </uui-color-swatches>`;
   }
   _renderPreviewButton() {
-    return html`<button
+    return html`<uui-popover
+      placement="bottom-start"
+      @close=${this.closeColorPicker}>
+      <button
         type="button"
+        part="trigger"
         slot="trigger"
         aria-label="${this.label || "Open Color picker"}"
         class=${classMap({
@@ -382,12 +395,12 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
         style=${styleMap({
       "--preview-color": `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
     })}
+        ?disabled=${this.disabled}
         @click=${this.openColorPicker}
         aria-haspopup="true"
         aria-expanded="false"></button>
-      <uui-popover placement="bottom-start" @close=${this.closeColorPicker}>
-        <div slot="popover">${this._renderColorPicker()}</div>
-      </uui-popover>`;
+      <div slot="popover">${this._renderColorPicker()}</div>
+    </uui-popover>`;
   }
   render() {
     return this.inline ? this._renderColorPicker() : this._renderPreviewButton();
@@ -435,8 +448,9 @@ UUIColorPickerElement.styles = [
         margin-left: 0.75rem;
         border-radius: 50%;
       }
-      color-picker__trigger {
-        cursor: pointer;
+      .color-picker__trigger[disabled] {
+        cursor: not-allowed;
+        opacity: 0.5;
       }
       .color-picker__preview::before,
       .color-picker__trigger::before {

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

@@ -4,8 +4,8 @@ import { UUIColorAreaEvent } from '@umbraco-ui/uui-color-area/lib';
 import { UUIColorSliderEvent } from '@umbraco-ui/uui-color-slider/lib';
 import { UUIColorSwatchesElement, UUIColorSwatchesEvent } from '@umbraco-ui/uui-color-swatches/lib';
 import { UUIInputElement } from '@umbraco-ui/uui-input/lib';
-export type UUIColorPickerFormat = 'hex' | 'rgb' | 'hsl';
-export type UUIColorPickerFormatWithAlpha = UUIColorPickerFormat | 'hexa' | 'rgba' | 'hsla';
+export type UUIColorPickerFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
+export type UUIColorPickerFormatWithAlpha = UUIColorPickerFormat | 'hexa' | 'rgba' | 'hsla' | 'hsva';
 type UUIColorPickerSize = 'small' | 'medium' | 'large';
 declare const UUIColorPickerElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & typeof LitElement;
 /**
@@ -15,7 +15,6 @@ declare const UUIColorPickerElement_base: (new (...args: any[]) => import("@umbr
  * @fires {UUIColorPickerChangeEvent} change - Fired when the color changes
  */
 export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
-    static styles: import("lit").CSSResult[];
     _input: UUIInputElement;
     _previewButton: HTMLButtonElement;
     _swatches: UUIColorSwatchesElement;
@@ -33,7 +32,7 @@ export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
      **/
     value: string;
     /**
-     * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA
+     * 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
      * it to the desired format.
      * @attr
@@ -92,7 +91,7 @@ export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
     uppercase: boolean;
     /**
      * An array of predefined color swatches to display. Can include any format the color picker can parse, including
-     * HEX(A), RGB(A), HSL(A), and CSS color names.
+     * HEX(A), RGB(A), HSL(A), HSV(A), and CSS color names.
      */
     swatches: string[];
     connectedCallback(): void;
@@ -118,6 +117,7 @@ export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
     private _renderSwatches;
     private _renderPreviewButton;
     render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-color-picker",
-  "version": "1.4.0",
+  "version": "1.5.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,7 +30,7 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.4.0",
+    "@umbraco-ui/uui-base": "1.5.0-rc.1",
     "colord": "^2.9.3"
   },
   "scripts": {
@@ -42,5 +42,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-color-picker",
-  "gitHead": "09437426b75b875ea93d7ab61b489d3817d81d96"
+  "gitHead": "2ff35a098ed8a3feb8ebed1bf43b4fbb75950d65"
 }