@oscarpalmer/oui 0.39.0 → 0.40.0

package/dist/js/{event.color-picker-BEpq0Adu.mjs → color-picker.event-Cksj5TvS.mjs}

@@ -1,30 +1,31 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
-import { getLocalization, localize, updateLocalizations } from "./l10n.mjs";
-import { COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_KEYS, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_OUTPUTS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_INPUT, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./color-picker/constants.color-picker.mjs";
+import { getLocalization, localize, updateLocalizations } from "./l10n/index.mjs";
+import { COLOR_PICKER_ATTRIBUTE_COPY_ERROR, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS, COLOR_PICKER_EXPRESSION_HEX_PREFIX, COLOR_PICKER_INPUT_TYPES, COLOR_PICKER_KEYS, COLOR_PICKER_MESSAGE_INPUT, COLOR_PICKER_MESSAGE_LABEL, COLOR_PICKER_OUTPUTS, COLOR_PICKER_SELECTOR_COPY, COLOR_PICKER_SELECTOR_INPUT, COLOR_PICKER_SELECTOR_OUTPUT_INPUT, COLOR_PICKER_SELECTOR_WELL, COLOR_PICKER_SELECTOR_WELL_KNOB, COLOR_PICKER_SYMBOL, COLOR_PICKER_TAGNAME, colorPickerLocalizations } from "./color-picker/color-picker.constants.mjs";
 import { copyValue } from "./internal/misc.mjs";
-import { OuiColorPickerEvent } from "./color-picker/models.color-picker.mjs";
-import { updateColorPickerForm, updateColorPickerValidity } from "./color-picker/form.color-picker.mjs";
-import { getColorPickerOutputFormat, updateColorPickerOutputCopyLabel, updateColorPickerOutputInputs, updateColorPickerOutputLabels } from "./color-picker/output.color-picker.mjs";
-import { createColorPickerAnchor, createColorPickerContent } from "./color-picker/dom.color-picker.mjs";
+import { OuiColorPickerEvent } from "./color-picker/color-picker.model.mjs";
+import { updateColorPickerForm, updateColorPickerValidity } from "./color-picker/color-picker.form.mjs";
+import { getColorPickerOutputFormat, updateColorPickerOutputCopyLabel, updateColorPickerOutputInputs, updateColorPickerOutputLabels } from "./color-picker/color-picker.output.mjs";
+import { createColorPickerAnchor, createColorPickerContent } from "./color-picker/color-picker.dom.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
-import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
-import { toggleStyles } from "@oscarpalmer/toretto/style";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+import { clamp } from "@oscarpalmer/atoms/number";
 import { supportsTouch } from "@oscarpalmer/toretto/touch";
+import { createElement } from "@oscarpalmer/toretto/create";
 import { getColor, getForegroundColor, isHexColor, isHslColor, isHslaColor, isHwbColor, isHwbaColor, isRgbColor, isRgbaColor } from "@oscarpalmer/atoms/color";
-import { clamp } from "@oscarpalmer/atoms";
-import { getAttribute as getAttribute$1, setAria as setAria$1, setProperty } from "@oscarpalmer/toretto";
-import { createElement as createElement$1 } from "@oscarpalmer/toretto/create";
-//#region src/js/color-picker/state.color-picker.ts
+import { setProperty } from "@oscarpalmer/toretto/property";
+//#region src/js/color-picker/color-picker.state.ts
 function attachColorPicker(state) {
-	const { anchor, content, host, id, inline, input, label, listeners, style } = state;
+	const { component } = state;
+	const { anchor, content, host, id, inline, input, label, listeners, style } = state.component;
 	if (!inline) {
-		state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.container, content.element, {
+		component.floatable = createEmbeddedFloatable(anchor.container ?? anchor.container, content.element, {
 			position: "below-start",
 			reusable: false
 		});
-		state.floatable.update();
+		component.floatable.update();
 	}
 	const labelId = `${id}_label`;
 	setAria(host, {
@@ -39,14 +40,14 @@ function attachColorPicker(state) {
 	input.remove();
 	listeners.push(on(host, "focusout", () => {
 		setTimeout(() => {
-			if (colorPickerMovement.parameters == null && !host.contains(document.activeElement)) state.floatable?.hide();
+			if (colorPickerMovement.parameters == null && !host.contains(document.activeElement)) component.floatable?.hide();
 		});
 	}), on(anchor.input, "change", () => {
 		onColorPickerInput(state);
 	}), on(anchor.input, "input", () => {
 		onColorPickerInput(state);
 	}), on(content.element, "beforetoggle", (event) => {
-		if (state.disabled) event.preventDefault();
+		if (component.disabled) event.preventDefault();
 	}, { passive: false }), on(content.element, "toggle", (event) => {
 		const open = event.newState === "open";
 		if (anchor.toggle != null) setAria(anchor.toggle, "expanded", open);
@@ -64,11 +65,11 @@ function attachColorPicker(state) {
 	}), on(content.output.toggle, "change", () => {
 		onColorPickerOutputFormat(state);
 	}));
-	colorPickerMap.set(host, state);
-	colorPickerSet.add(state);
+	colorPickers.add(state);
 }
 function detachColorPicker(state) {
-	const { anchor, content, floatable, host, input, label, style } = state;
+	const { component } = state;
+	const { anchor, content, floatable, host, input, label, style } = component;
 	floatable?.destroy();
 	setAria(host, {
 		describedby: void 0,
@@ -81,13 +82,20 @@ function detachColorPicker(state) {
 	anchor.container.remove();
 	content.element.remove();
 	style.remove();
-	const listeners = state.listeners.splice(0);
+	const listeners = component.listeners.splice(0);
 	const { length } = listeners;
 	for (let index = 0; index < length; index += 1) listeners[index]();
-	colorPickerMap.delete(state.host);
-	colorPickerSet.delete(state);
+	colorPickers.delete(state);
+}
+function initializeColorPicker(colorPicker) {
+	const state = colorPicker[COLOR_PICKER_SYMBOL];
+	colorPicker[COLOR_PICKER_SYMBOL].component = initializeColorPickerComponent(colorPicker, state);
+	if (state.form.restored != null) {
+		colorPicker.value = state.form.restored;
+		state.form.restored = void 0;
+	}
 }
-function initializeColorPicker(element, internals) {
+function initializeColorPickerComponent(element, state) {
 	const input = element.querySelector("input");
 	if (input == null || !COLOR_PICKER_INPUT_TYPES.has(input.type)) throw new Error(COLOR_PICKER_MESSAGE_INPUT);
 	const label = element.querySelector(`label[for="${input.id}"]`);
@@ -115,7 +123,7 @@ function initializeColorPicker(element, internals) {
 	const anchor = createColorPickerAnchor(parameters);
 	const content = createColorPickerContent(parameters);
 	const formatted = color.toHexString(alpha);
-	const state = {
+	state.component = {
 		alpha,
 		anchor,
 		content,
@@ -124,7 +132,6 @@ function initializeColorPicker(element, internals) {
 		id,
 		inline,
 		input,
-		internals,
 		output,
 		readonly,
 		required,
@@ -142,7 +149,7 @@ function initializeColorPicker(element, internals) {
 			component: {},
 			global: colorPickerLocalizations
 		},
-		style: createElement$1("style"),
+		style: createElement("style"),
 		value: {
 			current: formatted,
 			initial: formatted
@@ -160,24 +167,24 @@ function initializeColorPicker(element, internals) {
 	setColorPickerRequired(state, required);
 	setColorPickerValues(state, false);
 	updateColorPickerLabels(state);
-	updateColorPickerValidity(state, isHexColor(state.value.current, alpha));
-	return state;
+	updateColorPickerValidity(state, isHexColor(state.component.value.current, alpha));
+	return state.component;
 }
-const colorPickerMap = /* @__PURE__ */ new WeakMap();
-const colorPickerSet = /* @__PURE__ */ new Set();
+const colorPickers = /* @__PURE__ */ new Set();
 //#endregion
-//#region src/js/color-picker/misc.color-picker.ts
+//#region src/js/color-picker/color-picker.misc.ts
 function getColorPickerId() {
 	index += 1;
 	return `oui_color_picker_${index}`;
 }
 function getColorPickerOutput(element) {
-	const attribute = getAttribute$1(element, "output");
+	const attribute = getAttribute(element, "output");
 	return COLOR_PICKER_OUTPUTS.has(attribute) ? attribute : "none";
 }
 function getColorPickerValueType(state, value) {
+	const { alpha } = state.component;
 	switch (true) {
-		case isHexColor(value, state.alpha): return state.alpha ? "hexa" : "hex";
+		case isHexColor(value, alpha): return alpha ? "hexa" : "hex";
 		case isHslColor(value): return "hsl";
 		case isHslaColor(value): return "hsla";
 		case isHwbColor(value): return "hwb";
@@ -190,38 +197,41 @@ function setColorPickerLocalizations(first, second) {
 	updateColorPickerLocalizations(colorPickerLocalizations, colorPickerLocalizations.values, first, second);
 }
 function setColorPickerDisabled(state, type, value) {
-	state[type] = value;
-	setAria$1(state.host, type, value);
-	state.anchor.input.readOnly = value;
-	setAria$1(state.anchor.input, type, value);
-	setProperty(state.content.hue.input, "disabled", state.disabled || state.readonly);
-	if (state.anchor.toggle != null) setAria$1(state.anchor.toggle, "disabled", state.disabled);
-	if (state.content.opacity != null) setProperty(state.content.opacity.input, "disabled", state.disabled || state.readonly);
+	const { component } = state;
+	component[type] = value;
+	setAria(component.host, type, value);
+	component.anchor.input.readOnly = value;
+	setAria(component.anchor.input, type, value);
+	setProperty(component.content.hue.input, "disabled", component.disabled || component.readonly);
+	if (component.anchor.toggle != null) setAria(component.anchor.toggle, "disabled", component.disabled);
+	if (component.content.opacity != null) setProperty(component.content.opacity.input, "disabled", component.disabled || component.readonly);
 }
 function setColorPickerRequired(state, value) {
-	state.required = value;
-	setAria$1(state.host, "required", value);
-	setAria$1(state.anchor.input, "required", value);
-	updateColorPickerValidity(state, isHexColor(state.value.current, state.alpha));
+	const { component } = state;
+	component.required = value;
+	setAria(component.host, "required", value);
+	setAria(component.anchor.input, "required", value);
+	updateColorPickerValidity(state, isHexColor(component.value.current, component.alpha));
 }
 function setColorPickerValue(state, value, type) {
 	if (state == null) return;
 	const actual = type ?? getColorPickerValueType(state, value);
 	if (actual == null || type != null && type !== actual) return;
-	state.color.value[actual] = value;
+	state.component.color.value[actual] = value;
 	setColorPickerValues(state, true);
 }
 function setColorPickerValues(state, focus, input) {
-	const { anchor, color, content, host, style } = state;
+	const { component } = state;
+	const { anchor, color, content, host, style } = component;
 	color.foreground = getForegroundColor(color.value).hex;
 	const { alpha, hex, hsl, rgb } = color.value;
 	const { hue, lightness, saturation } = hsl;
 	const { blue, green, red } = rgb;
-	const value = input ?? color.value.toHexString(state.alpha);
+	const value = input ?? color.value.toHexString(component.alpha);
 	anchor.input.value = value;
 	content.hue.input.valueAsNumber = hue;
 	if (content.opacity != null) content.opacity.input.valueAsNumber = alpha;
-	state.value.current = value;
+	component.value.current = value;
 	style.textContent = `#${host.id} {
 	--oui-color-picker-alpha: ${alpha};
 	--oui-color-picker-blue: ${blue};
@@ -233,15 +243,15 @@ function setColorPickerValues(state, focus, input) {
 	--oui-color-picker-red: ${red};
 	--oui-color-picker-saturation: ${saturation};
 }`;
-	updateColorPickerForm(state, isHexColor(state.value.current, state.alpha));
+	updateColorPickerForm(state, isHexColor(component.value.current, component.alpha));
 	updateColorPickerOutputInputs(state);
 	updateColorPickerWell(state);
 	if (focus) content.well.knob.focus();
 }
 function updateColorPickerLabels(state) {
-	const { anchor, content, host, localizations } = state;
+	const { anchor, content, host, localizations } = state.component;
 	const { component, global } = localizations;
-	if (anchor.toggle != null) setAria$1(anchor.toggle, "label", localize(getLocalization(global, host, "toggle", component), {}, []));
+	if (anchor.toggle != null) setAria(anchor.toggle, "label", localize(getLocalization(global, host, "toggle", component), {}, []));
 	content.hue.label.textContent = localize(getLocalization(global, host, "hue", component), {}, []);
 	content.well.label.textContent = localize(getLocalization(global, host, "wellLabel", component), {}, []);
 	updateColorPickerOutputLabels(state);
@@ -250,23 +260,23 @@ function updateColorPickerLabels(state) {
 }
 function updateColorPickerLocalizations(instance, destination, first, second) {
 	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
-		for (const state of colorPickerSet) updateColorPickerLabels(state);
+		for (const state of colorPickers) updateColorPickerLabels(state);
 	});
 }
 function updateColorPickerWell(state) {
-	const { color, content, host, localizations } = state;
+	const { color, content, host, localizations } = state.component;
 	const { component, global } = localizations;
 	const { lightness, saturation } = color.value.hsl;
-	setAria$1(content.well.knob, "valuetext", localize(getLocalization(global, host, "wellValue", component), {
+	setAria(content.well.knob, "valuetext", localize(getLocalization(global, host, "wellValue", component), {
 		lightness,
 		saturation
 	}, [lightness, saturation]));
 }
 let index = 0;
 //#endregion
-//#region src/js/color-picker/event.color-picker.ts
+//#region src/js/color-picker/color-picker.event.ts
 function cancelMove(parameters) {
-	parameters.state.color.value.hexa = parameters.value;
+	parameters.state.component.color.value.hexa = parameters.value;
 	setColorPickerValues(parameters.state, true);
 	colorPickerMovement.parameters = void 0;
 	styleToggler.remove();
@@ -278,9 +288,10 @@ function onClick(event) {
 		[COLOR_PICKER_ATTRIBUTE_COPY_ERROR]: void 0,
 		[COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS]: void 0
 	});
-	const state = colorPickerMap.get(findAncestor(event, COLOR_PICKER_TAGNAME));
-	if (state == null || state.disabled) return;
-	const copy = button.dataset.color == null ? state.content.output?.copy : state.anchor.copy;
+	const state = findAncestor(event, COLOR_PICKER_TAGNAME)?.[COLOR_PICKER_SYMBOL];
+	if (state == null || state.component.disabled) return;
+	const { component } = state;
+	const copy = button.dataset.color == null ? component.content.output?.copy : component.anchor.copy;
 	if (copy == null) return;
 	if (copy.timer != null) {
 		clearTimeout(copy.timer);
@@ -291,37 +302,37 @@ function onClick(event) {
 	let value;
 	switch (color) {
 		case "hex":
-			value = state.color.value.toHexString(state.alpha);
+			value = component.color.value.toHexString(component.alpha);
 			break;
 		case "hsl":
-			value = state.color.value.toHslString(state.alpha);
+			value = component.color.value.toHslString(component.alpha);
 			break;
 		case "hwb":
-			value = state.color.value.toHwbString(state.alpha);
+			value = component.color.value.toHwbString(component.alpha);
 			break;
-		case "rgb": value = state.color.value.toRgbString(state.alpha);
+		case "rgb": value = component.color.value.toRgbString(component.alpha);
 	}
 	if (value != null) copyValue(value, () => {
-		console.log("Copied value to clipboard:", value);
 		updateColorPickerCopy(copy, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS);
 	}, () => {
-		console.warn("Failed to copy value to clipboard:", value);
 		updateColorPickerCopy(copy, COLOR_PICKER_ATTRIBUTE_COPY_ERROR);
 	});
 }
 function onColorPickerHue(state) {
-	const hue = state.content.hue.input.valueAsNumber;
-	state.color.value.hsla = {
-		...state.color.value.hsla,
+	const { component } = state;
+	const hue = component.content.hue.input.valueAsNumber;
+	component.color.value.hsla = {
+		...component.color.value.hsla,
 		hue
 	};
 	setColorPickerValues(state, false);
 }
 function onColorPickerInput(state) {
-	const { alpha, anchor, color, host } = state;
+	const { component } = state;
+	const { alpha, anchor, color, host } = component;
 	const value = anchor.input.value.replace(COLOR_PICKER_EXPRESSION_HEX_PREFIX, "");
 	if (value.toLowerCase() === (alpha ? color.value.hexa : color.value.hex).toLowerCase()) return;
-	state.value.current = anchor.input.value;
+	component.value.current = anchor.input.value;
 	const { length } = value;
 	let valid;
 	if (alpha) valid = isHexColor(value, true) && (length === 4 || length === 8);
@@ -334,17 +345,19 @@ function onColorPickerInput(state) {
 	dispatch(host, new OuiColorPickerEvent("oui:input", color.value, valid));
 }
 function onColorPickerOpacity(state) {
-	const opacity = state.content.opacity?.input.valueAsNumber;
+	const { component } = state;
+	const opacity = component.content.opacity?.input.valueAsNumber;
 	if (opacity == null) return;
-	state.color.value.alpha = opacity;
+	component.color.value.alpha = opacity;
 	setColorPickerValues(state, false);
 }
 function onColorPickerOutputFormat(state) {
-	const { items, toggle } = state.content.output ?? {};
+	const { content } = state.component;
+	const { items, toggle } = content.output ?? {};
 	if (items == null || toggle == null) return;
 	const attribute = `${COLOR_PICKER_TAGNAME}-output-${toggle.value}`;
 	for (const item of items) item.hidden = !item.hasAttribute(attribute);
-	if (state.content.output?.copy != null) updateColorPickerOutputCopyLabel(state, state.content.output.copy.button);
+	if (content.output?.copy != null) updateColorPickerOutputCopyLabel(state, content.output.copy.button);
 }
 function onColorPickerOutputValue(event, state) {
 	const input = findAncestor(event, COLOR_PICKER_SELECTOR_OUTPUT_INPUT);
@@ -355,19 +368,20 @@ function onColorPickerOutputValue(event, state) {
 	if (outputTimer != null) clearTimeout(outputTimer);
 	outputTimer = setTimeout(() => {
 		outputTimer = void 0;
-		state.color.value[color] = {
-			...state.color.value[color],
+		state.component.color.value[color] = {
+			...state.component.color.value[color],
 			[property]: input.valueAsNumber
 		};
 		setColorPickerValues(state, false);
 	});
 }
 function onEnter(state) {
-	const { alpha, anchor, color, internals } = state;
+	const { component, form } = state;
+	const { alpha, anchor, color } = component;
 	const input = anchor.input.value.replace(COLOR_PICKER_EXPRESSION_HEX_PREFIX, "");
 	const short = alpha ? input.length === 4 : input.length === 3;
 	if (isHexColor(input, alpha) && short) anchor.input.value = color.value.toHexString(alpha);
-	internals.form?.requestSubmit();
+	form.internals.form?.requestSubmit();
 }
 function onKeydown(event) {
 	if (colorPickerMovement.parameters != null && event.key === "Escape") {
@@ -376,16 +390,17 @@ function onKeydown(event) {
 	}
 	const knob = findAncestor(event, COLOR_PICKER_SELECTOR_WELL_KNOB);
 	if (!(event.key === "Enter" && findAncestor(event, COLOR_PICKER_SELECTOR_INPUT) != null || COLOR_PICKER_KEYS.has(event.key) && knob != null)) return;
-	const state = colorPickerMap.get(findAncestor(event, COLOR_PICKER_TAGNAME));
-	if (state == null || state.disabled || state.readonly) return;
+	const state = findAncestor(event, COLOR_PICKER_TAGNAME)?.[COLOR_PICKER_SYMBOL];
+	if (state == null || state.component.disabled || state.component.readonly) return;
 	event.preventDefault();
+	const { component } = state;
 	if (event.key === "Enter") {
 		onEnter(state);
 		return;
 	}
 	if (knob == null) return;
 	const modifier = event.shiftKey ? 10 : 1;
-	let { lightness, saturation } = state.color.value.hsl;
+	let { lightness, saturation } = component.color.value.hsl;
 	switch (event.key) {
 		case "ArrowDown":
 			lightness -= 1 * modifier;
@@ -410,8 +425,8 @@ function onKeydown(event) {
 			break;
 		case "PageUp": lightness += 10;
 	}
-	state.color.value.hsl = {
-		...state.color.value.hsl,
+	component.color.value.hsl = {
+		...state.component.color.value.hsl,
 		lightness: clamp(lightness, 0, 100),
 		saturation: clamp(saturation, 0, 100)
 	};
@@ -425,12 +440,12 @@ function onPointerdown(event) {
 	if (element == null) return;
 	if (supportsTouch.value) event.preventDefault();
 	if (getEventPosition(event) == null) return;
-	const state = colorPickerMap.get(element);
-	if (state == null || state.disabled || state.readonly) return;
+	const state = element?.[COLOR_PICKER_SYMBOL];
+	if (state == null || state.component.disabled || state.component.readonly) return;
 	colorPickerMovement.parameters = {
 		state,
 		rectangle: well.getBoundingClientRect(),
-		value: state.color.value.hexa
+		value: state.component.color.value.hexa
 	};
 	styleToggler.set();
 }
@@ -459,8 +474,8 @@ function updateColorPickerValues(parameters, position) {
 	const { x, y } = position;
 	const top = clamp((y - rectangle.top) / rectangle.height, 0, 1);
 	const left = clamp((x - rectangle.left) / rectangle.width, 0, 1);
-	state.color.value.hsl = {
-		...state.color.value.hsl,
+	state.component.color.value.hsl = {
+		...state.component.color.value.hsl,
 		lightness: (1 - top) * 100,
 		saturation: left * 100
 	};
@@ -482,4 +497,4 @@ on(document, "pointerup", onPointerup);
 on(document, "touchcancel", onPointerup);
 on(document, "touchstart", onPointerdown, { passive: false });
 //#endregion
-export { attachColorPicker as _, onColorPickerOutputFormat as a, detachColorPicker as b, getColorPickerOutput as c, setColorPickerLocalizations as d, setColorPickerRequired as f, updateColorPickerLocalizations as g, updateColorPickerLabels as h, onColorPickerOpacity as i, getColorPickerValueType as l, setColorPickerValues as m, onColorPickerHue as n, onColorPickerOutputValue as o, setColorPickerValue as p, onColorPickerInput as r, getColorPickerId as s, colorPickerMovement as t, setColorPickerDisabled as u, colorPickerMap as v, initializeColorPicker as x, colorPickerSet as y };
+export { attachColorPicker as _, onColorPickerOutputFormat as a, initializeColorPicker as b, getColorPickerOutput as c, setColorPickerLocalizations as d, setColorPickerRequired as f, updateColorPickerLocalizations as g, updateColorPickerLabels as h, onColorPickerOpacity as i, getColorPickerValueType as l, setColorPickerValues as m, onColorPickerHue as n, onColorPickerOutputValue as o, setColorPickerValue as p, onColorPickerInput as r, getColorPickerId as s, colorPickerMovement as t, setColorPickerDisabled as u, colorPickers as v, initializeColorPickerComponent as x, detachColorPicker as y };

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

@@ -0,0 +1,27 @@
+import { c as OuiLocalizations } from "./l10n.model-D6a9frgl.mjs";
+import { H as OuiColorPickerValueType, N as OuiColorPickerLocalizations, R as OuiColorPickerOutputType, S as GenericOuiColorPickerElement, z as OuiColorPickerState } from "./color-picker.constants-D1mxw_Le.mjs";
+//#region src/js/color-picker/color-picker.misc.d.ts
+declare function getColorPickerId(): string;
+declare function getColorPickerOutput(element: GenericOuiColorPickerElement): OuiColorPickerOutputType;
+declare function getColorPickerValueType(state: OuiColorPickerState, value: unknown): OuiColorPickerValueType | undefined;
+/**
+ * Set localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+declare function setColorPickerLocalizations(language: string, localizations: Partial<OuiColorPickerLocalizations>): void;
+/**
+ * Set localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+declare function setColorPickerLocalizations(localizations: Record<string, Partial<OuiColorPickerLocalizations>>): void;
+declare function setColorPickerDisabled(state: OuiColorPickerState, type: "disabled" | "readonly", value: boolean): void;
+declare function setColorPickerRequired(state: OuiColorPickerState, value: boolean): void;
+declare function setColorPickerValue<Type extends OuiColorPickerValueType>(state: OuiColorPickerState, value: unknown, type?: Type): void;
+declare function setColorPickerValues(state: OuiColorPickerState, focus: boolean, input?: string): void;
+declare function updateColorPickerLabels(state: OuiColorPickerState): void;
+declare function updateColorPickerLocalizations(instance: OuiLocalizations<OuiColorPickerLocalizations>, destination: Record<string, Partial<OuiColorPickerLocalizations>>, first: string | Record<string, Partial<OuiColorPickerLocalizations>>, second?: Partial<OuiColorPickerLocalizations>): void;
+//#endregion
+export { setColorPickerLocalizations as a, setColorPickerValues as c, setColorPickerDisabled as i, updateColorPickerLabels as l, getColorPickerOutput as n, setColorPickerRequired as o, getColorPickerValueType as r, setColorPickerValue as s, getColorPickerId as t, updateColorPickerLocalizations as u };

package/dist/js/combobox/combobox.constants.d.mts

@@ -0,0 +1,2 @@
+import { a as COMBOBOX_SYMBOL, c as comboboxMessages, d as messageSelect, f as selectorAnchor, h as selectorSelectionItem, i as COMBOBOX_AUTOCOMPLETES, l as comboboxSelectors, m as selectorOption, n as COMBOBOX_ATTRIBUTE_SELECTION, o as COMBOBOX_TAGNAME, p as selectorContent, r as COMBOBOX_ATTRIBUTE_SELECTION_ITEM, s as comboboxAttributes, t as COMBOBOX_ATTRIBUTE_ANCHOR, u as messageLabel } from "../combobox.constants-DZVkMP5g.mjs";
+export { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_SYMBOL, COMBOBOX_TAGNAME, comboboxAttributes, comboboxMessages, comboboxSelectors, messageLabel, messageSelect, selectorAnchor, selectorContent, selectorOption, selectorSelectionItem };

package/dist/js/combobox/{constants.combobox.mjs → combobox.constants.mjs}

@@ -1,6 +1,15 @@
-//#region src/js/combobox/constants.combobox.ts
+//#region src/js/combobox/combobox.constants.ts
 const COMBOBOX_TAGNAME = "oui-combobox";
 const COMBOBOX_ATTRIBUTE_ANCHOR = `${COMBOBOX_TAGNAME}-anchor`;
+const COMBOBOX_ATTRIBUTE_SELECTION = `${COMBOBOX_TAGNAME}-selection`;
+const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = `${COMBOBOX_TAGNAME}-selection-item`;
+const COMBOBOX_AUTOCOMPLETES = /* @__PURE__ */ new Set([
+	"both",
+	"inline",
+	"list",
+	"none"
+]);
+const COMBOBOX_SYMBOL = Symbol(COMBOBOX_TAGNAME);
 const attributeContent = `${COMBOBOX_TAGNAME}-content`;
 const attributeFilter = `${COMBOBOX_TAGNAME}-filter`;
 const attributeFilterInput = `${attributeFilter}-input`;
@@ -11,23 +20,8 @@ const attributeList = `${COMBOBOX_TAGNAME}-list`;
 const attributeListEmpty = `${attributeList}-empty`;
 const attributeMessage = `${COMBOBOX_TAGNAME}-message`;
 const attributeOption = `${COMBOBOX_TAGNAME}-option`;
-const attributeOptionActive = `${COMBOBOX_TAGNAME}-option-active`;
-const COMBOBOX_ATTRIBUTE_SELECTION = `${COMBOBOX_TAGNAME}-selection`;
-const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = `${COMBOBOX_TAGNAME}-selection-item`;
-const COMBOBOX_AUTOCOMPLETES = /* @__PURE__ */ new Set([
-	"both",
-	"inline",
-	"list",
-	"none"
-]);
-const messageLabel = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
-const messageSelect = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
-const selectorAnchor = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
-const selectorContent = `[${attributeContent}]`;
-const selectorOption = `[${attributeOption}]`;
-const selectorSelectionItem = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
-const COMBOBOX_ATTRIBUTES = {
-	active: attributeOptionActive,
+const comboboxAttributes = {
+	active: `${COMBOBOX_TAGNAME}-option-active`,
 	content: attributeContent,
 	empty: attributeListEmpty,
 	filter: attributeFilter,
@@ -39,15 +33,21 @@ const COMBOBOX_ATTRIBUTES = {
 	message: attributeMessage,
 	option: attributeOption
 };
-const COMBOBOX_MESSAGES = {
+const messageLabel = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
+const messageSelect = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
+const comboboxMessages = {
 	label: messageLabel,
 	select: messageSelect
 };
-const COMBOBOX_SELECTORS = {
+const selectorAnchor = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
+const selectorContent = `[${attributeContent}]`;
+const selectorOption = `[${attributeOption}]`;
+const selectorSelectionItem = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
+const comboboxSelectors = {
 	anchor: selectorAnchor,
 	content: selectorContent,
 	selectionItem: selectorSelectionItem,
 	option: selectorOption
 };
 //#endregion
-export { COMBOBOX_ATTRIBUTES, COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_MESSAGES, COMBOBOX_SELECTORS, COMBOBOX_TAGNAME, messageLabel, messageSelect, selectorAnchor, selectorContent, selectorOption, selectorSelectionItem };
+export { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_SYMBOL, COMBOBOX_TAGNAME, comboboxAttributes, comboboxMessages, comboboxSelectors, messageLabel, messageSelect, selectorAnchor, selectorContent, selectorOption, selectorSelectionItem };

package/dist/js/combobox/{dom.combobox.d.mts → combobox.dom.d.mts}

@@ -1,7 +1,7 @@
-import { c as OuiListboxPreview } from "../listbox.model-BHPA7GM4.mjs";
+import { c as OuiListboxPreview } from "../listbox.model-CuBOj4qe.mjs";
 import { CreateListboxContent, CreateListboxContentParameters } from "../internal/listbox/listbox.dom.mjs";
-import { OuiComboboxSelection, OuiComboboxSelectionItem, OuiComboboxState } from "./models.combobox.mjs";
-//#region src/js/combobox/dom.combobox.d.ts
+import { c as OuiComboboxState, o as OuiComboboxSelection, s as OuiComboboxSelectionItem } from "../combobox.model-oDV06XCN.mjs";
+//#region src/js/combobox/combobox.dom.d.ts
 type CreateAnchor = {
   container?: HTMLElement;
   element: HTMLElement;