@umbraco-ui/uui-color-picker 1.6.0 → 1.7.0

package/lib/index.js

@@ -12,25 +12,12 @@ var r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return "string"==type
 
 function namesPlugin(e,f){var a={white:"#ffffff",bisque:"#ffe4c4",blue:"#0000ff",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",antiquewhite:"#faebd7",aqua:"#00ffff",azure:"#f0ffff",whitesmoke:"#f5f5f5",papayawhip:"#ffefd5",plum:"#dda0dd",blanchedalmond:"#ffebcd",black:"#000000",gold:"#ffd700",goldenrod:"#daa520",gainsboro:"#dcdcdc",cornsilk:"#fff8dc",cornflowerblue:"#6495ed",burlywood:"#deb887",aquamarine:"#7fffd4",beige:"#f5f5dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkkhaki:"#bdb76b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",peachpuff:"#ffdab9",darkmagenta:"#8b008b",darkred:"#8b0000",darkorchid:"#9932cc",darkorange:"#ff8c00",darkslateblue:"#483d8b",gray:"#808080",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",deeppink:"#ff1493",deepskyblue:"#00bfff",wheat:"#f5deb3",firebrick:"#b22222",floralwhite:"#fffaf0",ghostwhite:"#f8f8ff",darkviolet:"#9400d3",magenta:"#ff00ff",green:"#008000",dodgerblue:"#1e90ff",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",blueviolet:"#8a2be2",forestgreen:"#228b22",lawngreen:"#7cfc00",indianred:"#cd5c5c",indigo:"#4b0082",fuchsia:"#ff00ff",brown:"#a52a2a",maroon:"#800000",mediumblue:"#0000cd",lightcoral:"#f08080",darkturquoise:"#00ced1",lightcyan:"#e0ffff",ivory:"#fffff0",lightyellow:"#ffffe0",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",linen:"#faf0e6",mediumaquamarine:"#66cdaa",lemonchiffon:"#fffacd",lime:"#00ff00",khaki:"#f0e68c",mediumseagreen:"#3cb371",limegreen:"#32cd32",mediumspringgreen:"#00fa9a",lightskyblue:"#87cefa",lightblue:"#add8e6",midnightblue:"#191970",lightpink:"#ffb6c1",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",mintcream:"#f5fffa",lightslategray:"#778899",lightslategrey:"#778899",navajowhite:"#ffdead",navy:"#000080",mediumvioletred:"#c71585",powderblue:"#b0e0e6",palegoldenrod:"#eee8aa",oldlace:"#fdf5e6",paleturquoise:"#afeeee",mediumturquoise:"#48d1cc",mediumorchid:"#ba55d3",rebeccapurple:"#663399",lightsteelblue:"#b0c4de",mediumslateblue:"#7b68ee",thistle:"#d8bfd8",tan:"#d2b48c",orchid:"#da70d6",mediumpurple:"#9370db",purple:"#800080",pink:"#ffc0cb",skyblue:"#87ceeb",springgreen:"#00ff7f",palegreen:"#98fb98",red:"#ff0000",yellow:"#ffff00",slateblue:"#6a5acd",lavenderblush:"#fff0f5",peru:"#cd853f",palevioletred:"#db7093",violet:"#ee82ee",teal:"#008080",slategray:"#708090",slategrey:"#708090",aliceblue:"#f0f8ff",darkseagreen:"#8fbc8f",darkolivegreen:"#556b2f",greenyellow:"#adff2f",seagreen:"#2e8b57",seashell:"#fff5ee",tomato:"#ff6347",silver:"#c0c0c0",sienna:"#a0522d",lavender:"#e6e6fa",lightgreen:"#90ee90",orange:"#ffa500",orangered:"#ff4500",steelblue:"#4682b4",royalblue:"#4169e1",turquoise:"#40e0d0",yellowgreen:"#9acd32",salmon:"#fa8072",saddlebrown:"#8b4513",sandybrown:"#f4a460",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightgoldenrodyellow:"#fafad2",snow:"#fffafa",lightgrey:"#d3d3d3",lightgray:"#d3d3d3",dimgray:"#696969",dimgrey:"#696969",olivedrab:"#6b8e23",olive:"#808000"},r={};for(var d in a)r[a[d]]=d;var l={};e.prototype.toName=function(f){if(!(this.rgba.a||this.rgba.r||this.rgba.g||this.rgba.b))return "transparent";var d,i,n=r[this.toHex()];if(n)return n;if(null==f?void 0:f.closest){var o=this.toRgb(),t=1/0,b="black";if(!l.length)for(var c in a)l[c]=new e(a[c]).toRgb();for(var g in a){var u=(d=o,i=l[g],Math.pow(d.r-i.r,2)+Math.pow(d.g-i.g,2)+Math.pow(d.b-i.b,2));u<t&&(t=u,b=g);}return b}};f.string.push([function(f){var r=f.toLowerCase(),d="transparent"===r?"#0000":a[r];return d?new e(d).toRgb():null},"name"]);}
 
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 class UUIColorPickerChangeEvent extends UUIEvent {
   constructor(evName, eventInit = {}) {
-    super(evName, __spreadValues(__spreadValues({}, { bubbles: true }), eventInit));
+    super(evName, {
+      ...{ bubbles: true },
+      ...eventInit
+    });
   }
 }
 UUIColorPickerChangeEvent.CHANGE = "change";
@@ -150,9 +137,8 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     this._syncValues();
   }
   handleAlphaChange(event) {
-    var _a;
     event.stopPropagation();
-    (_a = this._swatches) == null ? void 0 : _a.resetSelection();
+    this._swatches?.resetSelection();
     const element = event.target;
     const newColor = {
       h: this.hue,
@@ -163,9 +149,8 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     this.setColor(newColor);
   }
   handleHueChange(event) {
-    var _a;
     event.stopPropagation();
-    (_a = this._swatches) == null ? void 0 : _a.resetSelection();
+    this._swatches?.resetSelection();
     const element = event.target;
     const newColor = {
       h: element.value,
@@ -176,9 +161,8 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     this.setColor(newColor);
   }
   handleGridChange(event) {
-    var _a;
     event.stopPropagation();
-    (_a = this._swatches) == null ? void 0 : _a.resetSelection();
+    this._swatches?.resetSelection();
     const element = event.target;
     const newColor = {
       h: this.hue,
@@ -189,8 +173,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     this.setColor(newColor);
   }
   handleInputChange(event) {
-    var _a;
-    (_a = this._swatches) == null ? void 0 : _a.resetSelection();
+    this._swatches?.resetSelection();
     const target = event.target;
     if (target.value) {
       this.setColor(target.value);
@@ -201,11 +184,10 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     event.stopPropagation();
   }
   handleInputKeyDown(event) {
-    var _a;
     if (event.key === "Enter") {
       if (this.inputValue) {
         this.setColor(this.inputValue);
-        (_a = this._swatches) == null ? void 0 : _a.resetSelection();
+        this._swatches?.resetSelection();
         this.inputValue = this.value;
         setTimeout(() => this._input.select());
       } else {
@@ -241,12 +223,17 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     });
   }
   setColor(colorString) {
-    this._colord = new j(colorString);
-    const { h, l, s, a } = this._colord.toHsl();
+    const colord2 = new j(colorString);
+    const { h, s, l, a } = colord2.toHsl();
     this.hue = h;
     this.saturation = s;
     this.lightness = l;
     this.alpha = this.opacity ? a * 100 : 100;
+    const hslaColor = colorString;
+    if (hslaColor && hslaColor.h) {
+      this.hue = hslaColor.h;
+    }
+    this._colord = colord2;
     this._syncValues();
     this.dispatchEvent(
       new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE)
@@ -259,6 +246,16 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     }
     return this.uppercase ? string.toUpperCase() : string.toLowerCase();
   }
+  /** Generates a hex string from HSL values. Hue must be 0-360. All other arguments must be 0-100. */
+  getHexString(hue, saturation, lightness, alpha = 100) {
+    const color = w(
+      `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha / 100})`
+    );
+    if (!color.isValid()) {
+      return "";
+    }
+    return color.toHex();
+  }
   _syncValues() {
     this.inputValue = this.getFormattedValue(this.format);
     this.value = this.inputValue;
@@ -274,6 +271,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
         aria-disabled=${this.disabled ? "true" : "false"}>
         <uui-color-area
           .value="${this.value}"
+          .hue="${Math.round(this.hue)}"
           ?disabled=${this.disabled}
           @change=${this.handleGridChange}>
         </uui-color-area>
@@ -292,7 +290,11 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
                     class="opacity-slider"
                     .value=${Math.round(this.alpha)}
                     type="opacity"
-                    .color=${this.value}
+                    .color=${this.getHexString(
+      this.hue,
+      this.saturation,
+      this.lightness
+    )}
                     ?disabled=${this.disabled}
                     @change=${this.handleAlphaChange}>
                   </uui-color-slider>
@@ -466,7 +468,11 @@ UUIColorPickerElement.styles = [
           linear-gradient(45deg, transparent 75%, var(--uui-palette-grey,#c4c4c4) 75%),
           linear-gradient(45deg, var(--uui-palette-grey,#c4c4c4) 25%, transparent 25%);
         background-size: 10px 10px;
-        background-position: 0 0, 0 0, -5px -5px, 5px 5px;
+        background-position:
+          0 0,
+          0 0,
+          -5px -5px,
+          5px 5px;
       }
 
       .color-picker__preview-color--copied {

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

@@ -110,6 +110,8 @@ export declare class UUIColorPickerElement extends UUIColorPickerElement_base {
     handleEyeDropper(): void;
     setColor(colorString: string | HslaColor): boolean;
     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;
     private _syncValues;
     private _renderColorPicker;
     private _renderSwatches;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-color-picker",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,12 +30,12 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.6.0",
-    "@umbraco-ui/uui-popover-container": "1.6.0",
+    "@umbraco-ui/uui-base": "1.7.0",
+    "@umbraco-ui/uui-popover-container": "1.7.0",
     "colord": "^2.9.3"
   },
   "scripts": {
-    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
     "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
   },
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-color-picker",
-  "gitHead": "b06aebbb67ff67c9611a19927ec3ef484edcb1cc"
+  "gitHead": "1f139dc2b4ed9ba7b9fb1af5e934589d7c4d8f06"
 }