color-elements 0.0.2 → 0.0.3

package/src/space-picker/space-picker.js

@@ -0,0 +1,213 @@
+import ColorElement from "../common/color-element.js";
+
+const Self = class SpacePicker extends ColorElement {
+	static tagName = "space-picker";
+	static url = import.meta.url;
+	static shadowStyle = true;
+	static shadowTemplate = `<select id="picker" part="base"></select>`;
+
+	constructor () {
+		super();
+
+		this._el = {};
+		this._el.picker = this.shadowRoot.querySelector("#picker");
+	}
+
+	connectedCallback () {
+		super.connectedCallback?.();
+		this._el.picker.addEventListener("input", this);
+	}
+
+	disconnectedCallback () {
+		super.disconnectedCallback?.();
+		this._el.picker.removeEventListener("input", this);
+	}
+
+	handleEvent (event) {
+		if (event.target === this._el.picker && event.target.value !== this.value) {
+			this.value = event.target.value;
+		}
+	}
+
+	propChangedCallback ({name, prop, detail: change}) {
+		if (name === "spaces") {
+			if (!this.groups) {
+				this._el.picker.innerHTML = Object.entries(this.spaces)
+					.map(([id, space]) => `<option value="${ id }">${ this.getSpaceLabel(space) }</option>`)
+					.join("\n");
+			}
+			else {
+				let groups = this.groups;
+
+				// Remove empty groups
+				groups = Object.entries(groups).filter(([type, spaces]) => {
+					if (Object.keys(spaces).length === 0) {
+						console.warn(`Removed empty group of color spaces with the label "${type}."`);
+						return false;
+					}
+
+					return true;
+				});
+
+				if (!groups.length) {
+					console.warn("All provided groups of color spaces are empty. Falling back to default grouping.");
+					groups = [["All spaces", this.spaces]];
+				}
+
+				this._el.picker.innerHTML = groups.map(([type, spaces]) => `
+					<optgroup label="${type}">
+						${Object.entries(spaces)
+							.map(([id, space]) => `<option value="${ id }">${ this.getSpaceLabel(space) }</option>`)
+							.join("\n")}
+					</optgroup>
+				`).join("\n");
+			}
+
+			this._el.picker.value = this.value;
+		}
+
+		if (name === "value") {
+			let value = this.value;
+
+			if (value) {
+				if (!(value in this.spaces)) {
+					let spaces = Object.keys(this.spaces);
+					let firstSpace = spaces[0];
+					let currentSpace = this._el.picker.value;
+					let fallback = spaces.includes(currentSpace) ? currentSpace : firstSpace;
+
+					console.warn(`No color space found with id = "${ value }". Choose one of the following: ${ spaces.join(", ") }. Falling back to "${ fallback }".`);
+					this.value = value = fallback;
+				}
+
+				if (this._el.picker.value !== value) {
+					this._el.picker.value = value;
+				}
+			}
+		}
+	}
+
+	static props = {
+		value: {
+			default () {
+				if (this.groups) {
+					let groups = this.groups;
+					let firstGroup = Object.values(groups)[0];
+
+					return firstGroup && Object.keys(firstGroup)[0];
+				}
+				else {
+					return Object.keys(this.spaces)[0];
+				}
+			},
+		},
+
+		selectedSpace: {
+			get () {
+				let value = this.value;
+				if (value === undefined || value === null) {
+					return;
+				}
+
+				return this.spaces[value];
+			},
+		},
+
+		spaces: {
+			type: {
+				is: Object,
+				get values () {
+					return Self.Color.Space;
+				},
+				defaultValue: (id, index) => {
+					try {
+						return Self.Color.Space.get(id);
+					}
+					catch (e) {
+						console.error(e);
+					}
+				},
+			},
+			default: () => Self.Color.spaces,
+			convert (value) {
+				// Replace non-existing spaces with { id, name: id }
+				for (let id in value) {
+					if (!value[id]) {
+						value[id] = { id, name: id };
+					}
+				}
+
+				return value;
+			},
+			stringify (value) {
+				return Object.entries(value).map(([id, space]) => id).join(", ");
+			},
+		},
+
+		groupBy: {
+			type: {
+				is: Function,
+				arguments: ["space"],
+			},
+			reflect: false,
+		},
+
+		groups: {
+			get () {
+				if (!this.groupBy) {
+					return;
+				}
+
+				let ret = {};
+				for (let [id, space] of Object.entries(this.spaces)) {
+					let group = this.groupBy(space);
+					if (group) {
+						(ret[group] ??= {})[id] = space;
+					}
+				}
+
+				return ret;
+			},
+		},
+
+		getSpaceLabel: {
+			type: {
+				is: Function,
+				arguments: ["space"],
+			},
+			default () {
+				return space => space.name;
+			},
+			reflect: false,
+		},
+	};
+
+	static events = {
+		change: {
+			from () {
+				return this._el.picker;
+			},
+		},
+		input: {
+			from () {
+				return this._el.picker;
+			},
+		},
+		valuechange: {
+			propchange: "value",
+		},
+		spacechange: {
+			propchange: "selectedSpace",
+		},
+	};
+
+	static formAssociated = {
+		like: el => el._el.picker,
+		role: "combobox",
+		changeEvent: "change",
+	};
+};
+
+Self.define();
+
+export default Self;

package/_data/components.json

@@ -1,8 +0,0 @@
-[
-	"color-picker",
-	"color-swatch",
-	"color-inline",
-	"channel-slider",
-	"color-slider",
-	"color-gamut"
-]

package/lib/README.md

@@ -1,4 +0,0 @@
-# `lib`
-
-Dependencies from `node_modules` are automatically copied here.
-This directory is included in the `.gitignore` file.

package/lib/colorjs.io/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Lea Verou, Chris Lilley
-
-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/lib/colorjs.io/README.json

@@ -1,3 +0,0 @@
-{
-	"layout": "home"
-}

package/lib/colorjs.io/README.md

@@ -1,257 +0,0 @@
-<header class="readme-only">
-
-# Color.js: Let’s get serious about color
-
-[![Netlify Status](https://api.netlify.com/api/v1/badges/a6208d72-3d48-43ab-9132-b9f31f828609/deploy-status)](https://app.netlify.com/sites/colorjs/deploys)
-[![npm](https://img.shields.io/npm/dw/colorjs.io)](https://npmjs.com/package/colorjs.io)
-
-[Official website](https://colorjs.io) • [Contribution guide](CONTRIBUTING.md)
-
-Color.js is a color conversion and modification library originally created by two of the editors of the CSS Color specifications: Lea Verou and Chris Lilley.
-They continue to work on it, but are also joined by an exceptional small grassroots team of co-maintainers.
-
-## Features
-
-- **Color space agnostic**: Each color object is basically a list of coords and a color space reference. Operations are color space agnostic.
-Modules for <a href="https://colorjs.io/docs/spaces.html">a wide variety of color spaces</a>,
-including Lab/LCh, OKLab/OKLCh,
-sRGB and friends (HSL/HSV/HWB), Display P3,
-J<sub>z</sub>a<sub>z</sub>b<sub>z</sub>, REC.2100 and many <a href="https://colorjs.io/docs/spaces.html">more</a>.
-- **Doesn't gloss over color science**: Actual <a href="docs/gamut-mapping.html">gamut mapping</a> instead of naïve clipping,
-multiple <a href="https://colorjs.io/docs/color-difference.html">DeltaE</a> methods (76, CMC, 2000, J<sub>z</sub>),
-multiple <a href="https://colorjs.io/docs/adaptation.html">chromatic adaptation</a> methods (von Kries, Bradford, CAT02, CAT16),
-all with sensible defaults
-- **Up to date with CSS Color 4**: Every <a href="https://drafts.csswg.org/css-color-4/">CSS Color 4</a> format & color space supported for both <a href="docs/the-color-object.html">input</a> and <a href="https://colorjs.io/docs/output.html">output</a>, whether your browser supports it or not.
-- **Readable, object-oriented API**: Color objects for multiple operations on the same color, and static `Color.something()` functions for one-off calculations
-- **Modular & Extensible**: Use only what you need, or a bundle. Client-side or Node. Deep extensibility with <a href="https://colorjs.io/api/#Hooks-hooks.js">hooks</a>.
-- **Fast & efficient**: <a href="https://colorjs.io/docs/procedural.html">Procedural, tree-shakeable API</a> available for performance sensitive tasks and reduced bundle size
-
-</header>
-
-<section>
-	
-## Impact
-
-- Has been used to create demos for several W3C specifications
-- Has been used by browsers to test their CSS Color 4/5 implementations
-- Over [2 million total npm downloads](https://limonte.dev/total-npm-downloads/?package=colorjs.io)!
-- Used by several [high impact projects](https://www.npmjs.com/browse/depended/colorjs.io), including [Sass](https://sass-lang.com/), [Open Props](https://open-props.style/), [axe](https://www.deque.com/axe/) accessibility testing engine, and [OddContrast](https://www.oddcontrast.com/) and [CSS HD Gradients](https://gradient.style/) color tools
-- Parts of Color.js’s API are used as a testing ground for the design of a [native `Color` object for the Web platform](https://github.com/wicg/color-api).
-
-</section>
-
-<section class="cn-ignore">
-
-## Installation
-
-Color.js is designed make simple things easy, and complex things possible, and that extends to installation as well.
-
-For quick experiments, you can just import Color.js directly from the CDN (kindly provided by the awesome folks at [Netlify](https://netlify.com)) with all modules included:
-
-```js
-import Color from "https://colorjs.io/dist/color.js";
-```
-
-You can also install via npm if you’d prefer:
-
-```
-npm install colorjs.io
-```
-
-Whether you’re using NPM, the CDN, or local files, Color.js allows you to also import specific modules by directly importing from `src`:
-- `https://colorjs.io/src/` for the CDN
-- `node_modules/colorjs.io/src/ for NPM
-
-For example:
-```js
-import Color from "https://colorjs.io/src/color.js";
-import p3 from "https://colorjs.io/src/spaces/p3.js";
-import rec2020 from "https://colorjs.io/src/spaces/rec2020.js";
-import deltaE200 from "https://colorjs.io/src/deltaE/deltaE2000.js";
-```
-
-Warning: To use `import` statements in a browser, your `<script>` needs `type="module"`
-
-Are you old school and prefer to simply have a global `Color` variable? 
-We’ve got you covered! 
-Just include the following script in your HTML:
-
-```html
-<script src="https://colorjs.io/dist/color.global.js"></script>
-```
-
-<p class="read-more"><a href="https://colorjs.io/get">Read more about installation</a></p>
-
-</section>
-
-<section>
-
-## Reading colors
-
-Any color from CSS Color Level 4 should work:
-
-```js
-let color = new Color("slategray");
-let color2 = new Color("hwb(60 30% 40% / .5)");
-let color3 = new Color("color(display-p3 0 1 0 / .9)");
-let color4 = new Color("lch(50% 80 30)");
-```
-
-You can also create `Color` objects manually:
-
-```js
-let color2 = new Color("hwb", [60, 30, 40], .5);
-let color3 = new Color({space: "p3", coords: [0, 1, 0], alpha: .9});
-```
-
-<p class="read-more"><a href="https://colorjs.io/docs/the-color-object.html">Read more about color objects</a>
-
-</section>
-
-<section>
-<h2>Manipulating colors</h2>
-
-You can use properties to modify coordinates
-of any color space and convert back
-
-```js
-let color = new Color("slategray");
-color.lch.l = 80; // Set coord directly in any color space
-color.lch.c *= 1.2; // saturate by increasing LCH chroma by 20%
-color.hwb.w += 10; // any other color space also available
-```
-
-To modify coordinates in any color space you use `color.set()` and `color.setAll()`:
-
-```js
-let color = new Color("slategray");
-
-// Multiple coordinates
-color.set({
-	"lch.l": 80, // set lightness to 80
-	"lch.c": c => c * 1.2 // Relative manipulation
-});
-
-// Set single coordinate
-color.set("hwb.w", w => w + 10);
-```
-
-Coordinates of the color's color space are available without a prefix:
-
-```js
-let color = new Color("slategray").to("lch");
-
-// Multiple coordinates
-color.set({
-	l: 80, // set lightness to 80
-	c: c => c * 1.2 // Relative manipulation
-});
-
-// Set single coordinate
-color.set("h", 30);
-```
-
-Chaining-style modifications are also supported:
-```js
-let color = new Color("lch(50% 50 10)");
-color = color.set({
-	h: h => h + 180,
-	c: 60
-}).lighten();
-```
-
-You can also use properties:
-
-```js
-let color = new Color("slategray");
-color.lch.l = 80; // Set coord directly in any color space
-color.lch.c *= 1.2; // saturate by increasing LCH chroma by 20%
-color.hwb.w += 10; // any other color space also available
-```
-
-Coordinates of the color's color space are available without a prefix:
-
-```js
-let color = new Color("slategray").to("lch");
-color.l = 80; // Set LCH lightness
-color.c *= 1.2; // saturate by increasing LCH chroma
-```
-
-<p class="read-more"><a href="https://colorjs.io/docs/manipulation.html">Read more about color manipulation</a></p>
-
-</section>
-
-<section>
-
-## Converting between color spaces & stringifying
-
-Convert to any color space:
-
-```js
-let color = new Color("slategray");
-color.to("lch") // Convert to LCH
-```
-
-Output in any color space
-
-```js
-let color = new Color("slategray");
-color + ""; // default stringification
-color.to("p3").toString({precision: 3});
-```
-
-Clip to gamut or don't
-```js
-let color = new Color("p3", [0, 1, 0]);
-color.to("srgb") + ""; // Default toString()
-color.to("srgb").toString({inGamut: false});
-```
-
-<p class="read-more"><a href="https://colorjs.io/docs/output.html">Read more about output</a></p>
-
-</section>
-
-<section>
-
-## Interpolation
-
-Get a function that accepts a percentage:
-
-```js
-let color = new Color("p3", [0, 1, 0]);
-let redgreen = color.range("red", {
-	space: "lch", // interpolation space
-	outputSpace: "srgb"
-});
-redgreen(.5); // midpoint
-```
-
-Interpolation by discrete steps:
-
-```js
-let color = new Color("p3", [0, 1, 0]);
-color.steps("red", {
-	space: "lch",
-	outputSpace: "srgb",
-	maxDeltaE: 3, // max deltaE between consecutive steps
-	steps: 10 // min number of steps
-});
-```
-
-Shortcut for specific points in the range:
-
-```js
-let color = new Color("p3", [0, 1, 0]);
-let redgreen = color.mix("red", .5, {space: "lch", outputSpace: "srgb"});
-let reddishGreen = color.mix("red", .25, {space: "lch", outputSpace: "srgb"});
-```
-
-Static syntax  (every color method has a static one too):
-
-```js
-Color.mix("color(display-p3 0 1 0)", "red", .5);
-```
-
-<p class="read-more"><a href="https://colorjs.io/docs/interpolation.html">Read more about interpolation</a></p>
-
-</section>

package/lib/colorjs.io/colorjs.io/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Lea Verou, Chris Lilley
-
-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/lib/colorjs.io/colorjs.io/README.json

@@ -1,3 +0,0 @@
-{
-	"layout": "home"
-}