@umbraco-ui/uui-color-picker 1.14.2 → 1.15.0-rc.0

package/lib/index.js

@@ -13,6 +13,9 @@ 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"]);}
 
 class UUIColorPickerChangeEvent extends UUIEvent {
+  static {
+    this.CHANGE = "change";
+  }
   constructor(evName, eventInit = {}) {
     super(evName, {
       ...{ bubbles: true },
@@ -20,7 +23,6 @@ class UUIColorPickerChangeEvent extends UUIEvent {
     });
   }
 }
-UUIColorPickerChangeEvent.CHANGE = "change";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -264,6 +266,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     this._value = this.inputValue;
   }
   _renderColorPicker() {
+    const previewColor = this.value ? `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})` : "transparent";
     return html`
       <div
         class=${classMap({
@@ -282,6 +285,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
         <div class="color-picker__controls">
           <div class="color-picker__sliders">
             <uui-color-slider
+              hide-value-label
               label="hue"
               class="hue-slider"
               .value=${Math.round(this.hue)}
@@ -312,9 +316,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
             class="color-picker__preview color-picker__transparent-bg"
             title="Copy"
             aria-label="Copy"
-            style=${styleMap({
-      "--preview-color": `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
-    })}
+            style=${styleMap({ "--preview-color": previewColor })}
             @click=${this.handleCopy}></button>
         </div>
         <div class="color-picker__user-input" aria-live="polite">
@@ -372,6 +374,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
     </uui-color-swatches>`;
   }
   _renderPreviewButton() {
+    const previewColor = this.value ? `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})` : "transparent";
     return html`<button
         type="button"
         part="trigger"
@@ -384,9 +387,7 @@ let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
       "color-dropdown__trigger--large": this.size === "large",
       "color-picker__transparent-bg": true
     })}
-        style=${styleMap({
-      "--preview-color": `hsla(${this.hue}deg, ${this.saturation}%, ${this.lightness}%, ${this.alpha / 100})`
-    })}
+        style=${styleMap({ "--preview-color": previewColor })}
         ?disabled=${this.disabled}
         aria-haspopup="true"
         aria-expanded="false"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-color-picker",
-  "version": "1.14.2",
+  "version": "1.15.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,8 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.14.1",
-    "@umbraco-ui/uui-popover-container": "1.14.2",
+    "@umbraco-ui/uui-base": "1.15.0-rc.0",
+    "@umbraco-ui/uui-popover-container": "1.15.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": "03bb157cdc9563f2d3f8978e4b493d798cfea3b1"
+  "gitHead": "7bc6ab964ec6b9ba1a628dce605c62f958bf8385"
 }