@oscarpalmer/oui 0.39.0 → 0.40.0

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

@@ -1,6 +1,6 @@
-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 { COLOR_PICKER_SYMBOL, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./color-picker.constants.mjs";
+import { OuiColorPickerEvent } from "./color-picker.model.mjs";
+import { _ as attachColorPicker, d as setColorPickerLocalizations, f as setColorPickerRequired, g as updateColorPickerLocalizations, p as setColorPickerValue, r as onColorPickerInput, u as setColorPickerDisabled, x as initializeColorPickerComponent, y as detachColorPicker } from "../color-picker.event-Cksj5TvS.mjs";
 import "@oscarpalmer/atoms/color";
 //#region src/js/color-picker/index.ts
 var OuiColorPickerElement = class extends HTMLElement {
@@ -10,56 +10,54 @@ var OuiColorPickerElement = class extends HTMLElement {
 		"required",
 		"value"
 	];
-	#internals;
-	#restored;
-	#state;
 	/**
 	* Is the color picker disabled?
 	*/
 	get disabled() {
-		return this.#state?.disabled ?? false;
+		return this[COLOR_PICKER_SYMBOL]?.component.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);
+		const state = this[COLOR_PICKER_SYMBOL];
+		if (state.component != null && typeof value === "boolean" && value !== state.component.disabled) setColorPickerDisabled(state, "disabled", value);
 	}
 	/**
 	* Form element associated with the color picker
 	*/
 	get form() {
-		return this.#internals.form;
+		return this[COLOR_PICKER_SYMBOL].form.internals.form;
 	}
 	/**
 	* Color value as hexadecimal string
 	*/
 	get hex() {
-		return this.#state?.color.value.hex ?? "";
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hex ?? "";
 	}
 	/**
 	* Set color value from a hexadecimal string
 	*/
 	set hex(value) {
-		setColorPickerValue(this.#state, value, "hex");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hex");
 	}
 	/**
 	* Color value as hexadecimal string with alpha channel
 	*/
 	get hexa() {
-		return this.#state?.color.value.hexa ?? "";
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hexa ?? "";
 	}
 	/**
 	* Set color value from a hexadecimal string with alpha channel
 	*/
 	set hexa(value) {
-		setColorPickerValue(this.#state, value, "hexa");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hexa");
 	}
 	/**
 	* Color value as an _HSL_ color object
 	*/
 	get hsl() {
-		return this.#state?.color.value.hsl ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hsl ?? {
 			hue: 0,
 			lightness: 0,
 			saturation: 0
@@ -69,13 +67,13 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _HSL_ color object
 	*/
 	set hsl(value) {
-		setColorPickerValue(this.#state, value, "hsl");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hsl");
 	}
 	/**
 	* Color value as an _HSLA_ color object _(HSL with alpha channel)_
 	*/
 	get hsla() {
-		return this.#state?.color.value.hsla ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hsla ?? {
 			hue: 0,
 			lightness: 0,
 			saturation: 0,
@@ -86,13 +84,13 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _HSLA_ color object _(HSL with alpha channel)_
 	*/
 	set hsla(value) {
-		setColorPickerValue(this.#state, value, "hsla");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hsla");
 	}
 	/**
 	* Color value as an _HWB_ color object
 	*/
 	get hwb() {
-		return this.#state?.color.value.hwb ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hwb ?? {
 			hue: 0,
 			whiteness: 0,
 			blackness: 0
@@ -102,13 +100,13 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _HWB_ color object
 	*/
 	set hwb(value) {
-		setColorPickerValue(this.#state, value, "hwb");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hwb");
 	}
 	/**
 	* Color value as an _HWBA_ color object _(HWB with alpha channel)_
 	*/
 	get hwba() {
-		return this.#state?.color.value.hwba ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.hwba ?? {
 			hue: 0,
 			whiteness: 0,
 			blackness: 0,
@@ -119,49 +117,51 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _HWBA_ color object _(HWB with alpha channel)_
 	*/
 	set hwba(value) {
-		setColorPickerValue(this.#state, value, "hwba");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "hwba");
 	}
 	/**
 	* Text input value
 	*/
 	get input() {
-		return this.#state?.anchor.input.value ?? "";
+		return this[COLOR_PICKER_SYMBOL]?.component.anchor.input.value ?? "";
 	}
 	/**
 	* Label elements associated with the color picker
 	*/
 	get labels() {
-		return this.#internals.labels;
+		return this[COLOR_PICKER_SYMBOL].form.internals.labels;
 	}
 	/**
 	* Is the color picker readonly?
 	*/
 	get readonly() {
-		return this.#state?.readonly ?? false;
+		return this[COLOR_PICKER_SYMBOL]?.component.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);
+		const state = this[COLOR_PICKER_SYMBOL];
+		if (state.component != null && typeof value === "boolean" && value !== state.component.readonly) setColorPickerDisabled(state, "readonly", value);
 	}
 	/**
 	* Is the color picker required?
 	*/
 	get required() {
-		return this.#state?.required ?? false;
+		return this[COLOR_PICKER_SYMBOL]?.component.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);
+		const state = this[COLOR_PICKER_SYMBOL];
+		if (state.component != null && typeof value === "boolean" && value !== state.component.required) setColorPickerRequired(state, value);
 	}
 	/**
 	* Color value as an _RGB_ color object
 	*/
 	get rgb() {
-		return this.#state?.color.value.rgb ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.rgb ?? {
 			red: 0,
 			green: 0,
 			blue: 0
@@ -171,13 +171,13 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _RGB_ color object
 	*/
 	set rgb(value) {
-		setColorPickerValue(this.#state, value, "rgb");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "rgb");
 	}
 	/**
 	* Color value as an _RGBA_ color object _(RGB with alpha channel)_
 	*/
 	get rgba() {
-		return this.#state?.color.value.rgba ?? {
+		return this[COLOR_PICKER_SYMBOL]?.component.color.value.rgba ?? {
 			red: 0,
 			green: 0,
 			blue: 0,
@@ -188,47 +188,52 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* Set color value from an _RGBA_ color object _(RGB with alpha channel)_
 	*/
 	set rgba(value) {
-		setColorPickerValue(this.#state, value, "rgba");
+		setColorPickerValue(this[COLOR_PICKER_SYMBOL], value, "rgba");
 	}
 	/**
 	* Validation message for the color picker
 	*/
 	get validationMessage() {
-		return this.#internals.validationMessage;
+		return this[COLOR_PICKER_SYMBOL].form.internals.validationMessage;
 	}
 	/**
 	* Validity state for the color picker
 	*/
 	get validity() {
-		return this.#internals.validity;
+		return this[COLOR_PICKER_SYMBOL].form.internals.validity;
 	}
 	/**
 	* Current color value
 	*/
 	get value() {
-		return this.#state?.value.current ?? "";
+		return this[COLOR_PICKER_SYMBOL]?.component.value.current ?? "";
 	}
 	/**
 	* Set color value from a string, _HSL(A)_, _HWB(A)_, or _RGB(A)_ color object
 	*/
 	set value(value) {
+		const state = this[COLOR_PICKER_SYMBOL];
+		if (state.component == null) return;
 		if (typeof value === "string") {
-			this.#state.anchor.input.value = value;
-			onColorPickerInput(this.#state);
-		} else setColorPickerValue(this.#state, value);
+			state.component.anchor.input.value = value;
+			onColorPickerInput(state);
+		} else setColorPickerValue(state, value);
 	}
 	/**
 	* Can the color picker be validated?
 	*/
 	get willValidate() {
-		return this.#internals.willValidate;
+		return this[COLOR_PICKER_SYMBOL].form.internals.willValidate;
 	}
 	constructor() {
 		super();
-		this.#internals = this.attachInternals();
+		this[COLOR_PICKER_SYMBOL] = {
+			component: null,
+			form: { internals: this.attachInternals() }
+		};
 	}
 	attributeChangedCallback(name, _, value) {
-		if (this.#state == null) return;
+		if (this[COLOR_PICKER_SYMBOL].component == null) return;
 		switch (name) {
 			case "disabled":
 				this.disabled = value != null;
@@ -245,7 +250,7 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* @returns `true` if the color picker is valid, otherwise `false`
 	*/
 	checkValidity() {
-		return this.#internals.checkValidity();
+		return this[COLOR_PICKER_SYMBOL].form.internals.checkValidity();
 	}
 	/**
 	* Clear the color picker's value
@@ -254,21 +259,25 @@ var OuiColorPickerElement = class extends HTMLElement {
 		this.value = "";
 	}
 	connectedCallback() {
-		if (this.#state == null) this.#initialize();
-		else attachColorPicker(this.#state);
+		const state = this[COLOR_PICKER_SYMBOL];
+		const { component } = state;
+		if (component == null) initializeColorPickerComponent(this, state);
+		else attachColorPicker(state);
 	}
 	disconnectedCallback() {
-		if (this.#state != null) detachColorPicker(this.#state);
+		const state = this[COLOR_PICKER_SYMBOL];
+		if (state.component != null) detachColorPicker(state);
 	}
 	formDisabledCallback(disabled) {
 		this.disabled = disabled;
 	}
 	formResetCallback() {
-		this.value = this.#state?.value.initial ?? "";
+		this.value = this[COLOR_PICKER_SYMBOL]?.component.value.initial ?? "";
 	}
 	formStateRestoreCallback(state, reason) {
-		if (reason !== "restore" || typeof state !== "string" || this.#state == null) return;
-		if (this.#state == null) this.#restored = state;
+		const { component, form } = this[COLOR_PICKER_SYMBOL];
+		if (reason !== "restore" || typeof state !== "string" || component == null) return;
+		if (component == null) form.restored = state;
 		else this.value = state;
 	}
 	/**
@@ -277,7 +286,7 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* @returns `true` if the color picker is valid, otherwise `false`
 	*/
 	reportValidity() {
-		return this.#internals.reportValidity();
+		return this[COLOR_PICKER_SYMBOL].form.internals.reportValidity();
 	}
 	/**
 	* Set a custom validation message for the color picker
@@ -285,17 +294,10 @@ var OuiColorPickerElement = class extends HTMLElement {
 	* @param message Validation message
 	*/
 	setCustomValidity(message) {
-		this.#internals.setValidity({ customError: message !== "" }, message, this);
+		this[COLOR_PICKER_SYMBOL].form.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;
-		}
+		updateColorPickerLocalizations(colorPickerLocalizations, this[COLOR_PICKER_SYMBOL].component.localizations.component, first, second);
 	}
 };
 customElements.define(COLOR_PICKER_TAGNAME, OuiColorPickerElement);

package/dist/js/color-picker.constants-D1mxw_Le.d.mts

@@ -0,0 +1,179 @@
+import { c as OuiLocalizations } from "./l10n.model-D6a9frgl.mjs";
+import { c as OuiFloatable } from "./floatable.model-DXsQgoU7.mjs";
+import { Color, HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor } from "@oscarpalmer/atoms/color";
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+//#region src/js/color-picker/color-picker.model.d.ts
+type GenericOuiColorPickerElement = {
+  [COLOR_PICKER_SYMBOL]: OuiColorPickerState;
+  get value(): string;
+  set value(value: string);
+} & HTMLElement;
+type OuiColorPickerAnchor = {
+  copy?: OuiColorPickerCopy;
+  toggle?: HTMLButtonElement;
+  container: HTMLDivElement;
+  input: HTMLInputElement;
+};
+type OuiColorPickerColor = {
+  foreground: string;
+  value: Color;
+};
+type OuiColorPickerContent = {
+  element: HTMLDivElement;
+  hue: OuiColorPickerContentHue;
+  opacity?: OuiColorPickerContentOpacity;
+  output?: OuiColorPickerContentOutput;
+  well: OuiColorPickerContentWell;
+};
+type OuiColorPickerContentHue = {
+  container: HTMLDivElement;
+  input: HTMLInputElement;
+  label: HTMLLabelElement;
+  knob: HTMLSpanElement;
+  track: HTMLDivElement;
+};
+type OuiColorPickerContentOpacity = {
+  container: HTMLDivElement;
+  input: HTMLInputElement;
+  label: HTMLLabelElement;
+};
+type OuiColorPickerContentOutput = {
+  container: HTMLDivElement;
+  copy?: OuiColorPickerCopy;
+  inputs: HTMLInputElement[];
+  items: HTMLDivElement[];
+  toggle?: HTMLSelectElement;
+};
+type OuiColorPickerContentWell = {
+  element: HTMLDivElement;
+  knob: HTMLSpanElement;
+  label: HTMLSpanElement;
+};
+type OuiColorPickerCopy = {
+  button: HTMLButtonElement;
+  timer?: number;
+};
+type OuiColorPickerCreateParameters = {
+  alpha: boolean;
+  color: Color;
+  copy: boolean;
+  id: string;
+  inline: boolean;
+  input: HTMLInputElement;
+  output: OuiColorPickerOutputType;
+};
+declare class OuiColorPickerEvent extends Event {
+  readonly valid: boolean;
+  readonly value: OuiColorPickerEventValue;
+  constructor(type: OuiColorPickerEventType, color: Color, valid: boolean);
+}
+type OuiColorPickerEventType = "oui:change" | "oui:input";
+type OuiColorPickerEventValue = {
+  hex: string;
+  hexa: string;
+  hsl: HSLColor;
+  hsla: HSLAColor;
+  hwb: HWBColor;
+  hwba: HWBAColor;
+  rgb: RGBColor;
+  rgba: RGBAColor;
+};
+type OuiColorPickerLabel = {
+  element: HTMLLabelElement;
+  id: string;
+};
+type OuiColorPickerLocalizations = {
+  blackness: string;
+  blue: string;
+  copy: string;
+  green: string;
+  hex: string;
+  hsl: string;
+  hue: string;
+  hwb: string;
+  invalid: string;
+  lightness: string;
+  opacity: string;
+  output: string;
+  red: string;
+  rgb: string;
+  saturation: string;
+  toggle: string;
+  wellLabel: string;
+  wellValue: string | ((lightness: number, saturation: number) => string);
+  whiteness: string;
+};
+type OuiColorPickerMovement = {
+  parameters?: OuiColorPickerMovementParameters;
+};
+type OuiColorPickerMovementParameters = {
+  rectangle: DOMRect;
+  state: OuiColorPickerState;
+  value: string;
+};
+type OuiColorPickerOutputColor = "hsl" | "hwb" | "rgb";
+type OuiColorPickerOutputColorProperty = "blackness" | "blue" | "green" | "hue" | "lightness" | "red" | "saturation" | "whiteness";
+type OuiColorPickerOutputType = "all" | "none" | OuiColorPickerOutputColor;
+type OuiColorPickerState = {
+  component: OuiColorPickerStateComponent;
+  form: OuiColorPickerStateForm;
+};
+type OuiColorPickerStateComponent = {
+  alpha: boolean;
+  anchor: OuiColorPickerAnchor;
+  color: OuiColorPickerColor;
+  copy: boolean;
+  content: OuiColorPickerContent;
+  disabled: boolean;
+  floatable?: OuiFloatable;
+  host: GenericOuiColorPickerElement;
+  id: string;
+  inline: boolean;
+  input: HTMLInputElement;
+  label: OuiColorPickerLabel;
+  listeners: RemovableEventListener[];
+  localizations: OuiColorPickerStateLocalizations;
+  output: OuiColorPickerOutputType;
+  readonly: boolean;
+  required: boolean;
+  style: HTMLStyleElement;
+  value: OuiColorPickerValue;
+};
+type OuiColorPickerStateForm = {
+  internals: ElementInternals;
+  restored?: string;
+};
+type OuiColorPickerStateLocalizations = {
+  component: Record<string, Partial<OuiColorPickerLocalizations>>;
+  global: OuiLocalizations<OuiColorPickerLocalizations>;
+};
+type OuiColorPickerValue = {
+  current: string;
+  initial: string;
+};
+type OuiColorPickerValueType = "hex" | "hexa" | "hsl" | "hsla" | "hwb" | "hwba" | "rgb" | "rgba";
+//#endregion
+//#region src/js/color-picker/color-picker.constants.d.ts
+declare const COLOR_PICKER_TAGNAME = "oui-color-picker";
+declare const COLOR_PICKER_ATTRIBUTE_COPY: string;
+declare const COLOR_PICKER_ATTRIBUTE_COPY_ERROR: string;
+declare const COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS: string;
+declare const COLOR_PICKER_ATTRIBUTE_INPUT: string;
+declare const COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT: string;
+declare const COLOR_PICKER_ATTRIBUTE_WELL: string;
+declare const COLOR_PICKER_ATTRIBUTE_WELL_KNOB: string;
+declare const COLOR_PICKER_EXPRESSION_HEX_PREFIX: RegExp;
+declare const COLOR_PICKER_INPUT_TYPES: Set<string>;
+declare const COLOR_PICKER_KEYS: Set<string>;
+declare const COLOR_PICKER_MESSAGE_INPUT: string;
+declare const COLOR_PICKER_MESSAGE_LABEL: string;
+declare const COLOR_PICKER_OUTPUTS: Set<OuiColorPickerOutputType>;
+declare const COLOR_PICKER_SELECTOR_COPY: string;
+declare const COLOR_PICKER_SELECTOR_INPUT: string;
+declare const COLOR_PICKER_SELECTOR_OUTPUT_INPUT: string;
+declare const COLOR_PICKER_SELECTOR_WELL: string;
+declare const COLOR_PICKER_SELECTOR_WELL_KNOB: string;
+declare const COLOR_PICKER_SYMBOL: unique symbol;
+declare const colorPickerLocalizations: OuiLocalizations<OuiColorPickerLocalizations>;
+//#endregion
+export { OuiColorPickerCopy as A, OuiColorPickerStateComponent as B, OuiColorPickerAnchor as C, OuiColorPickerContentOpacity as D, OuiColorPickerContentHue as E, OuiColorPickerMovementParameters as F, OuiColorPickerValueType as H, OuiColorPickerOutputColor as I, OuiColorPickerOutputColorProperty as L, OuiColorPickerEvent as M, OuiColorPickerLocalizations as N, OuiColorPickerContentOutput as O, OuiColorPickerMovement as P, OuiColorPickerOutputType as R, GenericOuiColorPickerElement as S, OuiColorPickerContent as T, OuiColorPickerStateLocalizations as V, COLOR_PICKER_SELECTOR_WELL as _, COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT as a, COLOR_PICKER_TAGNAME as b, COLOR_PICKER_EXPRESSION_HEX_PREFIX as c, COLOR_PICKER_MESSAGE_INPUT as d, COLOR_PICKER_MESSAGE_LABEL as f, COLOR_PICKER_SELECTOR_OUTPUT_INPUT as g, COLOR_PICKER_SELECTOR_INPUT as h, COLOR_PICKER_ATTRIBUTE_INPUT as i, OuiColorPickerCreateParameters as j, OuiColorPickerContentWell as k, COLOR_PICKER_INPUT_TYPES as l, COLOR_PICKER_SELECTOR_COPY as m, COLOR_PICKER_ATTRIBUTE_COPY_ERROR as n, COLOR_PICKER_ATTRIBUTE_WELL as o, COLOR_PICKER_OUTPUTS as p, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS as r, COLOR_PICKER_ATTRIBUTE_WELL_KNOB as s, COLOR_PICKER_ATTRIBUTE_COPY as t, COLOR_PICKER_KEYS as u, COLOR_PICKER_SELECTOR_WELL_KNOB as v, OuiColorPickerColor as w, colorPickerLocalizations as x, COLOR_PICKER_SYMBOL as y, OuiColorPickerState as z };