Color picker

README.md

@@ -37,6 +37,11 @@ If you want to develop a component or contribute to the repository go to ["Get s
 | [`<uui-card-user>`](packages/uui-card-user)                                       | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-card-user?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-card-user)                                       |
 | [`<uui-caret>`](packages/uui-caret)                                               | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-caret?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-caret)                                               |
 | [`<uui-checkbox>`](packages/uui-checkbox)                                         | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-checkbox?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-checkbox)                                         |
+| [`<uui-color-area>`](packages/uui-color-area)                                     | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-area?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-area)                                     |
+| [`<uui-color-picker>`](packages/uui-color-picker)                                 | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-picker?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-picker)                                 |
+| [`<uui-color-slider>`](packages/uui-color-slider)                                 | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-slider?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-slider)                                 |
+| [`<uui-color-swatch>`](packages/uui-color-swatch)                                 | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-swatch?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-swatch)                                 |
+| [`<uui-color-swatches>`](packages/uui-color-swatches)                             | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-swatches?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-swatches)                             |
 | [`<uui-combobox>`](packages/uui-combobox)                                         | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-combobox?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-combobox)                                         |
 | [`<uui-combobox-list>`](packages/uui-combobox-list)                               | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-combobox-list?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-combobox-list)                               |
 | [`<uui-dialog>`](packages/uui-dialog)                                             | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-dialog?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-dialog)                                             |

package.json

@@ -79,6 +79,7 @@
     "autoprefixer": "10.4.11",
     "babel-loader": "9.1.0",
     "chromatic": "6.11.4",
+    "colord": "2.9.3",
     "element-internals-polyfill": "1.1.14",
     "eslint": "8.24.0",
     "eslint-config-prettier": "8.5.0",

packages/rollup-package.config.mjs

@@ -24,7 +24,7 @@ const createEsModulesConfig = (entryPoints = []) => {
           file: `./lib/${name}.js`,
           format: 'es',
         },
-        external: [/^lit/, /^@umbraco-ui/],
+        external: [/^lit/, /^@umbraco-ui/, /^colord/],
         plugins: [
           importCss({ from: undefined }),
           esbuild(),

packages/uui-base/lib/utils/drag.ts

@@ -0,0 +1,47 @@
+interface DragOptions {
+  /** Callback that runs as dragging occurs. */
+  onMove: (x: number, y: number) => void;
+  /** Callback that runs when dragging stops. */
+  onStop: () => void;
+  /**
+   * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This
+   * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial "click" to activate
+   * a drag (e.g. positioning a handle initially at the click target).
+   */
+  initialEvent: PointerEvent;
+}
+
+export const drag = (
+  container: HTMLElement,
+  options?: Partial<DragOptions>
+) => {
+  function move(pointerEvent: PointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView!;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    const x = pointerEvent.pageX - offsetX;
+    const y = pointerEvent.pageY - offsetY;
+
+    if (options?.onMove) {
+      options.onMove(x, y);
+    }
+  }
+
+  function stop() {
+    document.removeEventListener('pointermove', move);
+    document.removeEventListener('pointerup', stop);
+
+    if (options?.onStop) {
+      options.onStop();
+    }
+  }
+
+  document.addEventListener('pointermove', move, { passive: true });
+  document.addEventListener('pointerup', stop);
+
+  // If an initial event is set, trigger the first drag immediately
+  if (options?.initialEvent) {
+    move(options.initialEvent);
+  }
+};

packages/uui-base/lib/utils/index.ts

@@ -1,2 +1,4 @@
 export * from './Timer';
 export * from './demandCustomElement';
+export * from './drag';
+export * from './math';

packages/uui-base/lib/utils/math.ts

@@ -0,0 +1,6 @@
+//
+// Ensures a number stays within a minimum and maximum value
+//
+export const clamp = (value: number, min: number, max: number) => {
+  return Math.min(Math.max(value, min), max);
+};

packages/uui-color-area/README.md

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

packages/uui-color-area/lib/UUIColorAreaEvents.ts

@@ -0,0 +1,6 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { UUIColorAreaElement } from './uui-color-area.element';
+
+export class UUIColorAreaEvent extends UUIEvent<{}, UUIColorAreaElement> {
+  public static readonly CHANGE = 'change';
+}

packages/uui-color-area/lib/index.ts

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