@oscarpalmer/oui 0.38.0 → 0.39.0

package/dist/js/color-picker/dom.color-picker.mjs

@@ -0,0 +1,191 @@
+import { COLOR_PICKER_ATTRIBUTE_COPY, COLOR_PICKER_ATTRIBUTE_WELL, COLOR_PICKER_ATTRIBUTE_WELL_KNOB, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./constants.color-picker.mjs";
+import { createColorPickerOutput } from "./output.color-picker.mjs";
+import { createElement } from "@oscarpalmer/toretto/create";
+//#region src/js/color-picker/dom.color-picker.ts
+function createColorPickerAnchor(parameters) {
+	const { alpha, color, id, inline } = parameters;
+	const container = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-anchor`]: "" } });
+	const input = createElement("input", {
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-input`]: "",
+			autocomplete: "off",
+			autocorrect: "off",
+			form: "",
+			inputmode: "text",
+			placeholder: parameters.input.placeholder,
+			spellcheck: "false"
+		},
+		property: {
+			id,
+			type: "text",
+			value: alpha ? color.hexa : color.hex
+		}
+	});
+	let toggle;
+	if (!inline) toggle = createElement("button", {
+		aria: { label: "" },
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-toggle`]: "",
+			popovertarget: `${id}_content`
+		},
+		property: { type: "button" }
+	});
+	let copy;
+	if (parameters.copy) copy = createColorPickerCopy(parameters, "hex");
+	container.append(input);
+	if (toggle != null) container.append(toggle);
+	if (copy != null) container.append(copy.button);
+	return {
+		container,
+		copy,
+		input,
+		toggle
+	};
+}
+function createColorPickerContent(parameters) {
+	const { id, inline } = parameters;
+	const element = createElement("div", {
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-content`]: "",
+			popover: inline ? void 0 : ""
+		},
+		property: { id: `${id}_content` }
+	});
+	const hue = createColorPickerHue(parameters);
+	const opacity = createColorPickerOpacity(parameters);
+	const well = createColorPickerWell(parameters);
+	let output;
+	element.append(well.element, hue.container);
+	if (opacity != null) element.append(opacity.container);
+	if (parameters.output !== "none") {
+		output = createColorPickerOutput(parameters, createColorPickerCopy(parameters));
+		if (output != null) element.append(output.container);
+	}
+	return {
+		element,
+		hue,
+		opacity,
+		output,
+		well
+	};
+}
+function createColorPickerCopy(parameters, color) {
+	if (!parameters.copy) return;
+	return { button: createElement("button", {
+		attribute: { [COLOR_PICKER_ATTRIBUTE_COPY]: "" },
+		aria: { label: colorPickerLocalizations.defaults.copy },
+		data: { color },
+		property: {
+			textContent: colorPickerLocalizations.defaults.copy,
+			type: "button"
+		}
+	}) };
+}
+function createColorPickerHue(parameters) {
+	const { color, id } = parameters;
+	const container = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-hue`]: "" } });
+	const label = createElement("label", {
+		attribute: { [`${COLOR_PICKER_TAGNAME}-hue-label`]: "" },
+		property: {
+			htmlFor: `${id}_hue`,
+			id: `${id}_hue_label`
+		}
+	});
+	const input = createElement("input", {
+		aria: { labelledby: `${id}_label ${label.id}` },
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-hue-input`]: "",
+			form: "",
+			inputmode: "numeric",
+			max: 360,
+			min: 0
+		},
+		property: {
+			id: `${id}_hue`,
+			type: "range",
+			value: color.hsl.hue.toString()
+		}
+	});
+	const knob = createElement("span", {
+		aria: { hidden: true },
+		attribute: { [`${COLOR_PICKER_TAGNAME}-hue-knob`]: "" }
+	});
+	const track = createElement("div", {
+		aria: { hidden: true },
+		attribute: { [`${COLOR_PICKER_TAGNAME}-hue-track`]: "" }
+	});
+	track.append(knob);
+	container.append(label, input, track);
+	return {
+		container,
+		input,
+		knob,
+		label,
+		track
+	};
+}
+function createColorPickerOpacity(parameters) {
+	const { alpha, color, id } = parameters;
+	if (!alpha) return;
+	const container = createElement("div", { attribute: { [`${COLOR_PICKER_TAGNAME}-opacity`]: "" } });
+	const label = createElement("label", {
+		attribute: { [`${COLOR_PICKER_TAGNAME}-opacity-label`]: "" },
+		property: {
+			htmlFor: `${id}_opacity`,
+			id: `${id}_opacity_label`
+		}
+	});
+	const input = createElement("input", {
+		aria: { labelledby: `${id}_label ${label.id}` },
+		attribute: {
+			[`${COLOR_PICKER_TAGNAME}-opacity-input`]: "",
+			form: "",
+			max: 100,
+			min: 0
+		},
+		property: {
+			id: `${id}_opacity`,
+			type: "range",
+			value: color.alpha.toString()
+		}
+	});
+	const knob = createElement("span", {
+		aria: { hidden: true },
+		attribute: { [`${COLOR_PICKER_TAGNAME}-opacity-knob`]: "" }
+	});
+	const track = createElement("div", {
+		aria: { hidden: true },
+		attribute: { [`${COLOR_PICKER_TAGNAME}-opacity-track`]: "" }
+	});
+	track.append(knob);
+	container.append(label, input, track);
+	return {
+		container,
+		input,
+		label
+	};
+}
+function createColorPickerWell(parameters) {
+	const { id } = parameters;
+	const element = createElement("div", { attribute: { [COLOR_PICKER_ATTRIBUTE_WELL]: "" } });
+	const label = createElement("span", { property: {
+		id: `${id}_well_label`,
+		hidden: true
+	} });
+	const knob = createElement("span", {
+		aria: { labelledby: `${id}_label ${label.id}` },
+		attribute: { [COLOR_PICKER_ATTRIBUTE_WELL_KNOB]: "" },
+		property: {
+			role: "slider",
+			tabIndex: 0
+		}
+	});
+	element.append(label, knob);
+	return {
+		element,
+		knob,
+		label
+	};
+}
+//#endregion
+export { createColorPickerAnchor, createColorPickerContent, createColorPickerHue, createColorPickerOpacity, createColorPickerWell };

package/dist/js/color-picker/event.color-picker.d.mts

@@ -0,0 +1,9 @@
+import { L as OuiColorPickerState, M as OuiColorPickerMovement } from "../constants.color-picker-B-gFjL8m.mjs";
+//#region src/js/color-picker/event.color-picker.d.ts
+export declare function onColorPickerHue(state: OuiColorPickerState): void;
+export declare function onColorPickerInput(state: OuiColorPickerState): void;
+export declare function onColorPickerOpacity(state: OuiColorPickerState): void;
+export declare function onColorPickerOutputFormat(state: OuiColorPickerState): void;
+export declare function onColorPickerOutputValue(event: Event, state: OuiColorPickerState): void;
+export declare const colorPickerMovement: OuiColorPickerMovement;
+//#endregion

package/dist/js/color-picker/event.color-picker.mjs

@@ -0,0 +1,2 @@
+import { a as onColorPickerOutputFormat, i as onColorPickerOpacity, n as onColorPickerHue, o as onColorPickerOutputValue, r as onColorPickerInput, t as colorPickerMovement } from "../event.color-picker-BEpq0Adu.mjs";
+export { colorPickerMovement, onColorPickerHue, onColorPickerInput, onColorPickerOpacity, onColorPickerOutputFormat, onColorPickerOutputValue };

package/dist/js/color-picker/form.color-picker.d.mts

@@ -0,0 +1,5 @@
+import { L as OuiColorPickerState } from "../constants.color-picker-B-gFjL8m.mjs";
+//#region src/js/color-picker/form.color-picker.d.ts
+export declare function updateColorPickerForm(state: OuiColorPickerState, valid: boolean): void;
+export declare function updateColorPickerValidity(state: OuiColorPickerState, valid: boolean): void;
+//#endregion

package/dist/js/color-picker/form.color-picker.mjs

@@ -0,0 +1,24 @@
+import { getLocalization, localize } from "../l10n.mjs";
+import { OuiColorPickerEvent } from "./models.color-picker.mjs";
+import { dispatch } from "@oscarpalmer/toretto/event";
+//#region src/js/color-picker/form.color-picker.ts
+function updateColorPickerForm(state, valid) {
+	const { color, host, internals, value } = state;
+	internals.setFormValue(valid ? value.current : "");
+	updateColorPickerValidity(state, valid);
+	dispatch(host, new OuiColorPickerEvent("oui:change", color.value, valid));
+}
+function updateColorPickerValidity(state, valid) {
+	const { anchor, host, internals, localizations } = state;
+	if (valid) {
+		internals.setValidity({});
+		internals.checkValidity();
+		return;
+	}
+	const localization = getLocalization(localizations.global, host, "invalid", localizations.component);
+	const message = localization == null ? void 0 : localize(localization, {}, []);
+	internals.setValidity({ typeMismatch: true }, message, anchor.input);
+	internals.checkValidity();
+}
+//#endregion
+export { updateColorPickerForm, updateColorPickerValidity };

package/dist/js/color-picker/index.d.mts

@@ -0,0 +1,2 @@
+import { A as OuiColorPickerEvent, B as OuiColorPickerElement, G as setColorPickerLocalizations } from "../constants.color-picker-B-gFjL8m.mjs";
+export { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations };

package/dist/js/color-picker/index.mjs

@@ -0,0 +1,303 @@
+import { COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./constants.color-picker.mjs";
+import { OuiColorPickerEvent } from "./models.color-picker.mjs";
+import { _ as attachColorPicker, b as detachColorPicker, d as setColorPickerLocalizations, f as setColorPickerRequired, g as updateColorPickerLocalizations, p as setColorPickerValue, r as onColorPickerInput, u as setColorPickerDisabled, x as initializeColorPicker } from "../event.color-picker-BEpq0Adu.mjs";
+import "@oscarpalmer/atoms/color";
+//#region src/js/color-picker/index.ts
+var OuiColorPickerElement = class extends HTMLElement {
+	static formAssociated = true;
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"value"
+	];
+	#internals;
+	#restored;
+	#state;
+	/**
+	* Is the color picker disabled?
+	*/
+	get disabled() {
+		return this.#state?.disabled ?? false;
+	}
+	/**
+	* Should the color picker be disabled?
+	*/
+	set disabled(value) {
+		if (this.#state != null && typeof value === "boolean" && value !== this.#state.disabled) setColorPickerDisabled(this.#state, "disabled", value);
+	}
+	/**
+	* Form element associated with the color picker
+	*/
+	get form() {
+		return this.#internals.form;
+	}
+	/**
+	* Color value as hexadecimal string
+	*/
+	get hex() {
+		return this.#state?.color.value.hex ?? "";
+	}
+	/**
+	* Set color value from a hexadecimal string
+	*/
+	set hex(value) {
+		setColorPickerValue(this.#state, value, "hex");
+	}
+	/**
+	* Color value as hexadecimal string with alpha channel
+	*/
+	get hexa() {
+		return this.#state?.color.value.hexa ?? "";
+	}
+	/**
+	* Set color value from a hexadecimal string with alpha channel
+	*/
+	set hexa(value) {
+		setColorPickerValue(this.#state, value, "hexa");
+	}
+	/**
+	* Color value as an _HSL_ color object
+	*/
+	get hsl() {
+		return this.#state?.color.value.hsl ?? {
+			hue: 0,
+			lightness: 0,
+			saturation: 0
+		};
+	}
+	/**
+	* Set color value from an _HSL_ color object
+	*/
+	set hsl(value) {
+		setColorPickerValue(this.#state, value, "hsl");
+	}
+	/**
+	* Color value as an _HSLA_ color object _(HSL with alpha channel)_
+	*/
+	get hsla() {
+		return this.#state?.color.value.hsla ?? {
+			hue: 0,
+			lightness: 0,
+			saturation: 0,
+			alpha: 100
+		};
+	}
+	/**
+	* Set color value from an _HSLA_ color object _(HSL with alpha channel)_
+	*/
+	set hsla(value) {
+		setColorPickerValue(this.#state, value, "hsla");
+	}
+	/**
+	* Color value as an _HWB_ color object
+	*/
+	get hwb() {
+		return this.#state?.color.value.hwb ?? {
+			hue: 0,
+			whiteness: 0,
+			blackness: 0
+		};
+	}
+	/**
+	* Set color value from an _HWB_ color object
+	*/
+	set hwb(value) {
+		setColorPickerValue(this.#state, value, "hwb");
+	}
+	/**
+	* Color value as an _HWBA_ color object _(HWB with alpha channel)_
+	*/
+	get hwba() {
+		return this.#state?.color.value.hwba ?? {
+			hue: 0,
+			whiteness: 0,
+			blackness: 0,
+			alpha: 100
+		};
+	}
+	/**
+	* Set color value from an _HWBA_ color object _(HWB with alpha channel)_
+	*/
+	set hwba(value) {
+		setColorPickerValue(this.#state, value, "hwba");
+	}
+	/**
+	* Text input value
+	*/
+	get input() {
+		return this.#state?.anchor.input.value ?? "";
+	}
+	/**
+	* Label elements associated with the color picker
+	*/
+	get labels() {
+		return this.#internals.labels;
+	}
+	/**
+	* Is the color picker readonly?
+	*/
+	get readonly() {
+		return this.#state?.readonly ?? false;
+	}
+	/**
+	* Should the color picker be readonly?
+	*/
+	set readonly(value) {
+		if (this.#state != null && typeof value === "boolean" && value !== this.#state.readonly) setColorPickerDisabled(this.#state, "readonly", value);
+	}
+	/**
+	* Is the color picker required?
+	*/
+	get required() {
+		return this.#state?.required ?? false;
+	}
+	/**
+	* Should the color picker be required?
+	*/
+	set required(value) {
+		if (this.#state != null && typeof value === "boolean" && value !== this.#state.required) setColorPickerRequired(this.#state, value);
+	}
+	/**
+	* Color value as an _RGB_ color object
+	*/
+	get rgb() {
+		return this.#state?.color.value.rgb ?? {
+			red: 0,
+			green: 0,
+			blue: 0
+		};
+	}
+	/**
+	* Set color value from an _RGB_ color object
+	*/
+	set rgb(value) {
+		setColorPickerValue(this.#state, value, "rgb");
+	}
+	/**
+	* Color value as an _RGBA_ color object _(RGB with alpha channel)_
+	*/
+	get rgba() {
+		return this.#state?.color.value.rgba ?? {
+			red: 0,
+			green: 0,
+			blue: 0,
+			alpha: 100
+		};
+	}
+	/**
+	* Set color value from an _RGBA_ color object _(RGB with alpha channel)_
+	*/
+	set rgba(value) {
+		setColorPickerValue(this.#state, value, "rgba");
+	}
+	/**
+	* Validation message for the color picker
+	*/
+	get validationMessage() {
+		return this.#internals.validationMessage;
+	}
+	/**
+	* Validity state for the color picker
+	*/
+	get validity() {
+		return this.#internals.validity;
+	}
+	/**
+	* Current color value
+	*/
+	get value() {
+		return this.#state?.value.current ?? "";
+	}
+	/**
+	* Set color value from a string, _HSL(A)_, _HWB(A)_, or _RGB(A)_ color object
+	*/
+	set value(value) {
+		if (typeof value === "string") {
+			this.#state.anchor.input.value = value;
+			onColorPickerInput(this.#state);
+		} else setColorPickerValue(this.#state, value);
+	}
+	/**
+	* Can the color picker be validated?
+	*/
+	get willValidate() {
+		return this.#internals.willValidate;
+	}
+	constructor() {
+		super();
+		this.#internals = this.attachInternals();
+	}
+	attributeChangedCallback(name, _, value) {
+		if (this.#state == null) return;
+		switch (name) {
+			case "disabled":
+				this.disabled = value != null;
+				break;
+			case "required":
+				this.required = value != null;
+				break;
+			case "value": this.value = value ?? "";
+		}
+	}
+	/**
+	* Check if the color picker is valid
+	*
+	* @returns `true` if the color picker is valid, otherwise `false`
+	*/
+	checkValidity() {
+		return this.#internals.checkValidity();
+	}
+	/**
+	* Clear the color picker's value
+	*/
+	clear() {
+		this.value = "";
+	}
+	connectedCallback() {
+		if (this.#state == null) this.#initialize();
+		else attachColorPicker(this.#state);
+	}
+	disconnectedCallback() {
+		if (this.#state != null) detachColorPicker(this.#state);
+	}
+	formDisabledCallback(disabled) {
+		this.disabled = disabled;
+	}
+	formResetCallback() {
+		this.value = this.#state?.value.initial ?? "";
+	}
+	formStateRestoreCallback(state, reason) {
+		if (reason !== "restore" || typeof state !== "string" || this.#state == null) return;
+		if (this.#state == null) this.#restored = state;
+		else this.value = state;
+	}
+	/**
+	* Check if the color picker is valid and report any validation errors
+	*
+	* @returns `true` if the color picker is valid, otherwise `false`
+	*/
+	reportValidity() {
+		return this.#internals.reportValidity();
+	}
+	/**
+	* Set a custom validation message for the color picker
+	*
+	* @param message Validation message
+	*/
+	setCustomValidity(message) {
+		this.#internals.setValidity({ customError: message !== "" }, message, this);
+	}
+	setLocalizations(first, second) {
+		updateColorPickerLocalizations(colorPickerLocalizations, this.#state.localizations.component, first, second);
+	}
+	#initialize() {
+		this.#state = initializeColorPicker(this, this.#internals);
+		if (this.#restored != null) {
+			this.value = this.#restored;
+			this.#restored = void 0;
+		}
+	}
+};
+customElements.define(COLOR_PICKER_TAGNAME, OuiColorPickerElement);
+//#endregion
+export { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations };

package/dist/js/color-picker/misc.color-picker.d.mts

@@ -0,0 +1,2 @@
+import { G as setColorPickerLocalizations, H as getColorPickerOutput, J as setColorPickerValues, K as setColorPickerRequired, U as getColorPickerValueType, V as getColorPickerId, W as setColorPickerDisabled, X as updateColorPickerLocalizations, Y as updateColorPickerLabels, q as setColorPickerValue } from "../constants.color-picker-B-gFjL8m.mjs";
+export { getColorPickerId, getColorPickerOutput, getColorPickerValueType, setColorPickerDisabled, setColorPickerLocalizations, setColorPickerRequired, setColorPickerValue, setColorPickerValues, updateColorPickerLabels, updateColorPickerLocalizations };

package/dist/js/color-picker/misc.color-picker.mjs

@@ -0,0 +1,2 @@
+import { c as getColorPickerOutput, d as setColorPickerLocalizations, f as setColorPickerRequired, g as updateColorPickerLocalizations, h as updateColorPickerLabels, l as getColorPickerValueType, m as setColorPickerValues, p as setColorPickerValue, s as getColorPickerId, u as setColorPickerDisabled } from "../event.color-picker-BEpq0Adu.mjs";
+export { getColorPickerId, getColorPickerOutput, getColorPickerValueType, setColorPickerDisabled, setColorPickerLocalizations, setColorPickerRequired, setColorPickerValue, setColorPickerValues, updateColorPickerLabels, updateColorPickerLocalizations };

package/dist/js/color-picker/models.color-picker.d.mts

@@ -0,0 +1,2 @@
+import { A as OuiColorPickerEvent, C as OuiColorPickerContent, D as OuiColorPickerContentWell, E as OuiColorPickerContentOutput, F as OuiColorPickerOutputColorProperty, I as OuiColorPickerOutputType, L as OuiColorPickerState, M as OuiColorPickerMovement, N as OuiColorPickerMovementParameters, O as OuiColorPickerCopy, P as OuiColorPickerOutputColor, R as OuiColorPickerStateLocalizations, S as OuiColorPickerColor, T as OuiColorPickerContentOpacity, j as OuiColorPickerLocalizations, k as OuiColorPickerCreateParameters, w as OuiColorPickerContentHue, x as OuiColorPickerAnchor, z as OuiColorPickerValueType } from "../constants.color-picker-B-gFjL8m.mjs";
+export { OuiColorPickerAnchor, OuiColorPickerColor, OuiColorPickerContent, OuiColorPickerContentHue, OuiColorPickerContentOpacity, OuiColorPickerContentOutput, OuiColorPickerContentWell, OuiColorPickerCopy, OuiColorPickerCreateParameters, OuiColorPickerEvent, OuiColorPickerLocalizations, OuiColorPickerMovement, OuiColorPickerMovementParameters, OuiColorPickerOutputColor, OuiColorPickerOutputColorProperty, OuiColorPickerOutputType, OuiColorPickerState, OuiColorPickerStateLocalizations, OuiColorPickerValueType };

package/dist/js/color-picker/models.color-picker.mjs

@@ -0,0 +1,24 @@
+//#region src/js/color-picker/models.color-picker.ts
+var OuiColorPickerEvent = class extends Event {
+	valid;
+	value;
+	constructor(type, color, valid) {
+		super(type, {
+			bubbles: true,
+			cancelable: true
+		});
+		this.valid = valid;
+		this.value = {
+			hex: color.hex,
+			hexa: color.hexa,
+			hsl: color.hsl,
+			hsla: color.hsla,
+			hwb: color.hwb,
+			hwba: color.hwba,
+			rgb: color.rgb,
+			rgba: color.rgba
+		};
+	}
+};
+//#endregion
+export { OuiColorPickerEvent };

package/dist/js/color-picker/output.color-picker.d.mts

@@ -0,0 +1,8 @@
+import { E as OuiColorPickerContentOutput, L as OuiColorPickerState, O as OuiColorPickerCopy, P as OuiColorPickerOutputColor, k as OuiColorPickerCreateParameters } from "../constants.color-picker-B-gFjL8m.mjs";
+//#region src/js/color-picker/output.color-picker.d.ts
+export declare function createColorPickerOutput(parameters: OuiColorPickerCreateParameters, copy: OuiColorPickerCopy | undefined): OuiColorPickerContentOutput | undefined;
+export declare function getColorPickerOutputFormat(state: OuiColorPickerState): OuiColorPickerOutputColor | undefined;
+export declare function updateColorPickerOutputCopyLabel(state: OuiColorPickerState, button: HTMLButtonElement): void;
+export declare function updateColorPickerOutputInputs(state: OuiColorPickerState): void;
+export declare function updateColorPickerOutputLabels(state: OuiColorPickerState): void;
+//#endregion