@umbraco-ui/uui-color-picker 1.2.0-rc.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 uui-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# uui-color-picker
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-picker?logoColor=%231B264F)
+
+Umbraco style color-picker component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-color-picker
+```
+
+Import the registration of `<uui-color-picker>` via:
+
+```javascript
+import '@umbraco-ui/uui-color-picker';
+```
+
+When looking to leverage the `UUIColorPickerElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIColorPickerElement } from '@umbraco-ui/uui-color-picker';
+```
+
+## Usage
+
+```html
+<uui-color-picker></uui-color-picker>
+```

package/custom-elements.json

@@ -0,0 +1,170 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-color-picker",
+      "path": "./lib/uui-color-picker.element.ts",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The current color.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "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.",
+          "type": "UUIColorPickerFormat",
+          "default": "\"'hex'\""
+        },
+        {
+          "name": "name",
+          "description": "The input's name attribute.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "size",
+          "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+          "type": "UUIColorPickerSize",
+          "default": "\"'medium'\""
+        },
+        {
+          "name": "no-format-toggle",
+          "description": "Removes the format toggle.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "inline",
+          "description": "Renders the color picker inline rather than inside a dropdown.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the color picker.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "opacity",
+          "description": "Whether to show the opacity slider.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "uppercase",
+          "description": "By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The current color.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "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.",
+          "type": "UUIColorPickerFormat",
+          "default": "\"'hex'\""
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "The input's name attribute.",
+          "type": "string",
+          "default": "\"''\""
+        },
+        {
+          "name": "size",
+          "attribute": "size",
+          "description": "Determines the size of the color picker's trigger. This has no effect on inline color pickers.",
+          "type": "UUIColorPickerSize",
+          "default": "\"'medium'\""
+        },
+        {
+          "name": "noFormatToggle",
+          "attribute": "no-format-toggle",
+          "description": "Removes the format toggle.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "inline",
+          "attribute": "inline",
+          "description": "Renders the color picker inline rather than inside a dropdown.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the color picker.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "opacity",
+          "attribute": "opacity",
+          "description": "Whether to show the opacity slider.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "name": "uppercase",
+          "attribute": "uppercase",
+          "description": "By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
+        {
+          "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.",
+          "type": "string[]",
+          "default": "[\"#d0021b\",\"#f5a623\",\"#f8e71c\",\"#8b572a\",\"#7ed321\",\"#417505\",\"#bd10e0\",\"#9013fe\",\"#4a90e2\",\"#50e3c2\",\"#b8e986\",\"#000\",\"#444\",\"#888\",\"#ccc\",\"#fff\"]"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "Fired when the color changes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Override the default label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-color-picker-width",
+          "description": "The width of the color picker"
+        }
+      ]
+    }
+  ]
+}

package/lib/UUIColorPickerEvents.d.ts

@@ -0,0 +1,5 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { UUIColorPickerElement } from './uui-color-picker.element';
+export declare class UUIColorPickerChangeEvent extends UUIEvent<{}, UUIColorPickerElement> {
+    static readonly CHANGE = "change";
+}

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './uui-color-picker.element';
+export * from './UUIColorPickerEvents';

package/lib/index.js

@@ -0,0 +1,574 @@
+import { LitElement, html, css } from 'lit';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { query, state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { live } from 'lit/directives/live.js';
+import { demandCustomElement, clamp } from '@umbraco-ui/uui-base/lib/utils';
+import { styleMap } from 'lit/directives/style-map.js';
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
+
+var r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return "string"==typeof r?r.length>0:"number"==typeof r},n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return (r=isFinite(r)?r%360:0)>0?r:r+360},a=function(r){return {r:e(r.r,0,255),g:e(r.g,0,255),b:e(r.b,0,255),a:e(r.a)}},o=function(r){return {r:n(r.r),g:n(r.g),b:n(r.b),a:n(r.a,3)}},i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return {h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return {r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return {h:u(r.h),s:e(r.s,0,100),l:e(r.l,0,100),a:e(r.a)}},d=function(r){return {h:n(r.h),s:n(r.s),l:n(r.l),a:n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e;},c=function(r){return {h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u;},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return {h:u(r.h),s:e(r.s,0,100),v:e(r.v,0,100),a:e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return [e,t[n][1]]}return [null,void 0]},x=function(r){return "string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},M=function(r,t){var n=c(r);return {h:n.h,s:e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return (299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return {h:n.h,s:n.s,l:e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1};}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i;},r.prototype.toRgb=function(){return o(this.rgba)},r.prototype.toRgbString=function(){return r=o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u;},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u;},r.prototype.toHsv=function(){return r=h(this.rgba),{h:n(r.h),s:n(r.s),v:n(r.v),a:n(r.a,3)};var r;},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r;},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return "number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):n(this.rgba.a,3);var t;},r.prototype.hue=function(r){var t=c(this.rgba);return "number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)},S=[],k=function(r){r.forEach(function(r){S.indexOf(r)<0&&(r(j,y),S.push(r));});};
+
+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 {
+}
+UUIColorPickerChangeEvent.CHANGE = "change";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  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);
+  return result;
+};
+k([namesPlugin]);
+const hasEyeDropper = "EyeDropper" in window;
+let UUIColorPickerElement = class extends LabelMixin("label", LitElement) {
+  constructor() {
+    super(...arguments);
+    this.inputValue = "";
+    this.hue = 0;
+    this.saturation = 0;
+    this.lightness = 0;
+    this.alpha = 100;
+    this._colord = w("hsl(0, 0%, 0%)");
+    this.value = "";
+    this.format = "hex";
+    this.name = "";
+    this.size = "medium";
+    this.noFormatToggle = false;
+    this.inline = false;
+    this.disabled = false;
+    this.opacity = false;
+    this.uppercase = false;
+    this.swatches = [
+      "#d0021b",
+      "#f5a623",
+      "#f8e71c",
+      "#8b572a",
+      "#7ed321",
+      "#417505",
+      "#bd10e0",
+      "#9013fe",
+      "#4a90e2",
+      "#50e3c2",
+      "#b8e986",
+      "#000",
+      "#444",
+      "#888",
+      "#ccc",
+      "#fff"
+    ];
+  }
+  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");
+    demandCustomElement(this, "uui-button");
+    demandCustomElement(this, "uui-button-group");
+    demandCustomElement(this, "uui-popover");
+    demandCustomElement(this, "uui-color-swatches");
+    demandCustomElement(this, "uui-color-swatch");
+    demandCustomElement(this, "uui-color-area");
+    demandCustomElement(this, "uui-color-slider");
+  }
+  getFormattedValue(format) {
+    const formatToUse = this.opacity ? `${format}a` : format;
+    const { h, l, s } = this._colord.toHsl();
+    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
+    );
+    switch (formatToUse) {
+      case "hex":
+        return hex;
+      case "hexa":
+        return hexa;
+      case "rgb":
+        return `rgb(${r} ${g} ${b})`;
+      case "rgba":
+        return this._colord.toRgbString();
+      case "hsl":
+        return `hsl(${h} ${s} ${l})`;
+      case "hsla":
+        return this._colord.toHslString();
+      default:
+        return "";
+    }
+  }
+  getBrightness(lightness) {
+    return clamp(-1 * (200 * lightness / (this.saturation - 200)), 0, 100);
+  }
+  getLightness(brightness) {
+    return clamp(
+      (200 - this.saturation) * brightness / 100 * 5 / 10,
+      0,
+      100
+    );
+  }
+  handleFormatToggle() {
+    const formats = ["hex", "rgb", "hsl"];
+    const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
+    this.format = formats[nextIndex];
+    this._syncValues();
+  }
+  handleAlphaChange(event) {
+    var _a;
+    event.stopPropagation();
+    (_a = this._swatches) == null ? void 0 : _a.resetSelection();
+    const element = event.target;
+    const newColor = {
+      h: this.hue,
+      s: this.saturation,
+      l: this.lightness,
+      a: Math.round(element.value) / 100
+    };
+    this.setColor(newColor);
+  }
+  handleHueChange(event) {
+    var _a;
+    event.stopPropagation();
+    (_a = this._swatches) == null ? void 0 : _a.resetSelection();
+    const element = event.target;
+    const newColor = {
+      h: element.value,
+      s: this.saturation,
+      l: this.lightness,
+      a: this.alpha / 100
+    };
+    this.setColor(newColor);
+  }
+  handleGridChange(event) {
+    var _a;
+    event.stopPropagation();
+    (_a = this._swatches) == null ? void 0 : _a.resetSelection();
+    const element = event.target;
+    const newColor = {
+      h: this.hue,
+      s: element.saturation,
+      l: element.lightness,
+      a: this.alpha / 100
+    };
+    this.setColor(newColor);
+  }
+  handleInputChange(event) {
+    var _a;
+    (_a = this._swatches) == null ? void 0 : _a.resetSelection();
+    const target = event.target;
+    if (target.value) {
+      this.setColor(target.value);
+      target.value = this.value;
+    } else {
+      this.setColor("#000");
+    }
+    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.inputValue = this.value;
+        setTimeout(() => this._input.select());
+      } else {
+        this.setColor("#000");
+      }
+    }
+  }
+  handleColorSwatchChange(event) {
+    event.stopImmediatePropagation();
+    const target = event.target;
+    if (target.value) {
+      this.setColor(target.value);
+    } else {
+      this.setColor("#000");
+    }
+  }
+  handleCopy() {
+    navigator.clipboard.writeText(this._input.value).then(() => {
+      this._previewButton.classList.add("color-picker__preview-color--copied");
+      this._previewButton.addEventListener("animationend", () => {
+        this._previewButton.classList.remove(
+          "color-picker__preview-color--copied"
+        );
+      });
+    });
+  }
+  openColorPicker(event) {
+    event.stopImmediatePropagation();
+    const target = event.target;
+    const popover = target.nextElementSibling;
+    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;
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", "false");
+    }
+  }
+  handleEyeDropper() {
+    if (!hasEyeDropper) {
+      return;
+    }
+    const eyeDropper = new EyeDropper();
+    eyeDropper.open().then((result) => this.setColor(result.sRGBHex)).catch(() => {
+    });
+  }
+  setColor(colorString) {
+    this._colord = new j(colorString);
+    const { h, l, s, a } = this._colord.toHsl();
+    this.hue = h;
+    this.saturation = s;
+    this.lightness = l;
+    this.alpha = this.opacity ? a * 100 : 100;
+    this._syncValues();
+    this.dispatchEvent(
+      new UUIColorPickerChangeEvent(UUIColorPickerChangeEvent.CHANGE)
+    );
+    return true;
+  }
+  setLetterCase(string) {
+    if (typeof string !== "string") {
+      return "";
+    }
+    return this.uppercase ? string.toUpperCase() : string.toLowerCase();
+  }
+  _syncValues() {
+    this.inputValue = this.getFormattedValue(this.format);
+    this.value = this.inputValue;
+  }
+  _renderColorPicker() {
+    return html`
+      <div
+        class=${classMap({
+      "color-picker": true,
+      "color-picker--inline": this.inline,
+      "color-picker--disabled": this.disabled
+    })}
+        aria-disabled=${this.disabled ? "true" : "false"}>
+        <uui-color-area .value="${this.value}" @change=${this.handleGridChange}>
+        </uui-color-area>
+        <div class="color-picker__controls">
+          <div class="color-picker__sliders">
+            <uui-color-slider
+              label="hue"
+              class="hue-slider"
+              .value=${Math.round(this.hue)}
+              @change=${this.handleHueChange}>
+            </uui-color-slider>
+            ${this.opacity ? html`
+                  <uui-color-slider
+                    label="alpha"
+                    class="opacity-slider"
+                    .value=${Math.round(this.alpha)}
+                    type="opacity"
+                    .color=${this.value}
+                    @change=${this.handleAlphaChange}>
+                  </uui-color-slider>
+                ` : ""}
+          </div>
+          <button
+            type="button"
+            part="preview"
+            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})`
+    })}
+            @click=${this.handleCopy}></button>
+        </div>
+        <div class="color-picker__user-input" aria-live="polite">
+          <uui-input
+            label="label"
+            type="text"
+            part="input"
+            name=${this.name}
+            autocomplete="off"
+            autocapitalize="off"
+            spellcheck="false"
+            .value=${live(this.inputValue)}
+            ?disabled=${this.disabled}
+            @keydown=${this.handleInputKeyDown}
+            @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
+                  label="Select a color"
+                  compact
+                  @click=${this.handleEyeDropper}>
+                  <uui-icon-registry-essential>
+                    <uui-icon name="colorpicker"></uui-icon>
+                  </uui-icon-registry-essential>
+                </uui-button>` : ""}
+          </uui-button-group>
+        </div>
+        <uui-color-swatches
+          id="swatches"
+          class="color-picker__swatches"
+          @change=${this.handleColorSwatchChange}>
+          ${this.swatches.map(
+      (swatch) => html`<uui-color-swatch
+                label="${swatch}"
+                .value=${swatch}></uui-color-swatch>`
+    )}
+        </uui-color-swatches>
+      </div>
+    `;
+  }
+  _renderPreviewButton() {
+    return html`<button
+        type="button"
+        slot="trigger"
+        aria-label="${this.label || "Open Color picker"}"
+        class=${classMap({
+      "color-picker__trigger": true,
+      "color-dropdown__trigger--disabled": this.disabled,
+      "color-dropdown__trigger--small": this.size === "small",
+      "color-dropdown__trigger--medium": this.size === "medium",
+      "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})`
+    })}
+        @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>`;
+  }
+  render() {
+    return this.inline ? this._renderColorPicker() : this._renderPreviewButton();
+  }
+};
+UUIColorPickerElement.styles = [
+  css`
+      :host {
+        --uui-look-outline-border: #ddd;
+        --uui-look-outline-border-hover: #aaa;
+        font-size: 0.8rem;
+        display: block;
+        width: var(--uui-color-picker-width, 280px);
+      }
+      .color-picker {
+        width: 100%;
+        background-color: #fff;
+        user-select: none;
+        border: solid 1px #e4e4e7;
+      }
+      .color-picker__user-input {
+        display: flex;
+        padding: 0 0.75rem 0.75rem 0.75rem;
+      }
+      .color-picker__user-input uui-button {
+        border: var(--uui-input-border-width, 1px) solid
+          var(--uui-input-border-color, var(--uui-color-border,#d8d7d9));
+        border-left: none;
+      }
+      .color-picker__preview,
+      .color-picker__trigger {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        width: 2.25rem;
+        height: 2.25rem;
+        border: none;
+        border-radius: 50%;
+        background: none;
+      }
+      .color-picker__preview {
+        cursor: copy;
+        margin-left: 0.75rem;
+        border-radius: 50%;
+      }
+      color-picker__trigger {
+        cursor: pointer;
+      }
+      .color-picker__preview::before,
+      .color-picker__trigger::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+        /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
+        background-color: var(--preview-color);
+      }
+
+      .color-dropdown__trigger--empty::before {
+        background-color: transparent;
+      }
+
+      .color-picker__transparent-bg {
+        background-image: linear-gradient(
+            45deg,
+            var(--uui-palette-grey,#c4c4c4) 25%,
+            transparent 25%
+          ),
+          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey,#c4c4c4) 75%),
+          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;
+      }
+
+      .color-picker__preview-color--copied {
+        animation: pulse 0.75s;
+      }
+
+      @keyframes pulse {
+        0% {
+          box-shadow: 0 0 0 0 var(--uui-palette-space-cadet-light,rgb(38, 53, 110));
+        }
+        70% {
+          box-shadow: 0 0 0 0.5rem transparent;
+        }
+        100% {
+          box-shadow: 0 0 0 0 transparent;
+        }
+      }
+
+      .color-picker__controls {
+        padding: 0.75rem;
+        display: flex;
+        align-items: center;
+      }
+      .color-picker__sliders {
+        flex: 1 1 auto;
+      }
+
+      uui-color-slider:not(:last-of-type) {
+        margin-bottom: 1rem;
+      }
+
+      .color-picker__toggle-format {
+        min-width: 45px;
+        --uui-button-font-size: 0.8rem;
+      }
+      .color-picker__toggle-format > span {
+        text-transform: uppercase;
+      }
+
+      uui-color-swatches {
+        border-top: solid 1px #d4d4d8;
+      }
+
+      button[slot='trigger'] {
+        border-radius: 50%;
+        cursor: pointer;
+        width: 36px;
+        height: 36px;
+      }
+
+      uui-popover {
+        display: block;
+        width: 100%;
+        margin: 5px 0;
+      }
+
+      uui-input {
+        /*  lower the font size to avoid overflow with hlsa format */
+        font-size: 0.85rem;
+        box-sizing: content-box;
+        flex: 1;
+      }
+
+      uui-color-area {
+        width: 100%;
+      }
+    `
+];
+__decorateClass([
+  query('[part="input"]')
+], UUIColorPickerElement.prototype, "_input", 2);
+__decorateClass([
+  query(".color-picker__preview")
+], UUIColorPickerElement.prototype, "_previewButton", 2);
+__decorateClass([
+  query("#swatches")
+], UUIColorPickerElement.prototype, "_swatches", 2);
+__decorateClass([
+  state()
+], UUIColorPickerElement.prototype, "inputValue", 2);
+__decorateClass([
+  state()
+], UUIColorPickerElement.prototype, "hue", 2);
+__decorateClass([
+  state()
+], UUIColorPickerElement.prototype, "saturation", 2);
+__decorateClass([
+  state()
+], UUIColorPickerElement.prototype, "lightness", 2);
+__decorateClass([
+  state()
+], UUIColorPickerElement.prototype, "alpha", 2);
+__decorateClass([
+  state()
+], UUIColorPickerElement.prototype, "_colord", 2);
+__decorateClass([
+  property()
+], UUIColorPickerElement.prototype, "value", 2);
+__decorateClass([
+  property()
+], UUIColorPickerElement.prototype, "format", 2);
+__decorateClass([
+  property()
+], UUIColorPickerElement.prototype, "name", 2);
+__decorateClass([
+  property()
+], UUIColorPickerElement.prototype, "size", 2);
+__decorateClass([
+  property({ attribute: "no-format-toggle", type: Boolean })
+], UUIColorPickerElement.prototype, "noFormatToggle", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorPickerElement.prototype, "inline", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorPickerElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], UUIColorPickerElement.prototype, "opacity", 2);
+__decorateClass([
+  property({ type: Boolean })
+], UUIColorPickerElement.prototype, "uppercase", 2);
+__decorateClass([
+  property({ attribute: false })
+], UUIColorPickerElement.prototype, "swatches", 2);
+UUIColorPickerElement = __decorateClass([
+  defineElement("uui-color-picker")
+], UUIColorPickerElement);
+
+export { UUIColorPickerChangeEvent, UUIColorPickerElement };

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

@@ -0,0 +1,126 @@
+import { LitElement } from 'lit';
+import { HslaColor } from 'colord';
+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';
+type UUIColorPickerSize = 'small' | 'medium' | 'large';
+declare const UUIColorPickerElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & typeof LitElement;
+/**
+ * @element uui-color-picker
+ * @cssprop --uui-color-picker-width - The width of the color picker
+ * @description
+ * @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;
+    private inputValue;
+    private hue;
+    private saturation;
+    private lightness;
+    private alpha;
+    private _colord;
+    /**
+     * The current color.
+     * @attr
+     * @type {string}
+     * @default ''
+     **/
+    value: string;
+    /**
+     * The format to use for the display value. If opacity is enabled, these will translate to HEXA, RGBA, and HSLA
+     * respectively. The color picker will always accept user input in any format (including CSS color names) and convert
+     * it to the desired format.
+     * @attr
+     * @type {UUIColorPickerFormat}
+     * @default 'hex'
+     */
+    format: UUIColorPickerFormat;
+    /**
+     * The input's name attribute.
+     * @attr
+     * @type {string}
+     * @default ''
+     **/
+    name: string;
+    /**
+     * Determines the size of the color picker's trigger. This has no effect on inline color pickers.
+     * @attr
+     * @type {UUIColorPickerSize}
+     * @default 'medium'
+     **/
+    size: UUIColorPickerSize;
+    /**
+     * Removes the format toggle.
+     * @attr
+     * @type {boolean}
+     * @default false
+     **/
+    noFormatToggle: boolean;
+    /**
+     * Renders the color picker inline rather than inside a dropdown.
+     * @attr
+     * @type {boolean}
+     * @default false
+     **/
+    inline: boolean;
+    /**
+     * Disables the color picker.
+     * @attr
+     * @type {boolean}
+     * @default false
+     **/
+    disabled: boolean;
+    /**
+     * Whether to show the opacity slider.
+     * @attr
+     * @type {boolean}
+     * @default false
+     **/
+    opacity: boolean;
+    /**
+     * By default, the value will be set in lowercase. Set this to true to set it in uppercase instead.
+     * @attr
+     * @type {boolean}
+     * @default false
+     **/
+    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.
+     */
+    swatches: string[];
+    connectedCallback(): void;
+    /** Returns the current value as a string in the specified format. */
+    getFormattedValue(format: UUIColorPickerFormat): string;
+    getBrightness(lightness: number): number;
+    getLightness(brightness: number): number;
+    handleFormatToggle(): void;
+    handleAlphaChange(event: UUIColorSliderEvent): void;
+    handleHueChange(event: UUIColorSliderEvent): void;
+    handleGridChange(event: UUIColorAreaEvent): void;
+    handleInputChange(event: CustomEvent): void;
+    handleInputKeyDown(event: KeyboardEvent): void;
+    handleColorSwatchChange(event: UUIColorSwatchesEvent): void;
+    handleCopy(): void;
+    openColorPicker(event: Event): void;
+    closeColorPicker(event: Event): void;
+    handleEyeDropper(): void;
+    setColor(colorString: string | HslaColor): boolean;
+    setLetterCase(string: string): string;
+    private _syncValues;
+    private _renderColorPicker;
+    private _renderPreviewButton;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-color-picker': UUIColorPickerElement;
+    }
+}
+export {};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@umbraco-ui/uui-color-picker",
+  "version": "1.2.0-rc.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Color Picker"
+  ],
+  "description": "Umbraco UI color-picker component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-color-picker"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "1.2.0-rc.0",
+    "colord": "^2.9.3"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-color-picker",
+  "gitHead": "43f1b9a8bd1721af30ba7c145517ee665d874df3"
+}