@oscarpalmer/oui 0.38.0 → 0.40.0

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

@@ -0,0 +1,500 @@
+import { createEmbeddedFloatable } from "./floatable/floatable.embedded.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/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 { 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 { setProperty } from "@oscarpalmer/toretto/property";
+//#region src/js/color-picker/color-picker.state.ts
+function attachColorPicker(state) {
+	const { component } = state;
+	const { anchor, content, host, id, inline, input, label, listeners, style } = state.component;
+	if (!inline) {
+		component.floatable = createEmbeddedFloatable(anchor.container ?? anchor.container, content.element, {
+			position: "below-start",
+			reusable: false
+		});
+		component.floatable.update();
+	}
+	const labelId = `${id}_label`;
+	setAria(host, {
+		describedby: getAria(input, "describedby"),
+		labelledby: labelId
+	});
+	setAttributes(host, { name: input.name === "" ? input.id : input.name });
+	label.element.htmlFor = anchor.input.id;
+	label.element.id = labelId;
+	if (anchor.toggle != null) setAria(anchor.toggle, "expanded", false);
+	input.before(style, anchor.container, content.element);
+	input.remove();
+	listeners.push(on(host, "focusout", () => {
+		setTimeout(() => {
+			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 (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);
+		if (open) content.well.knob.focus();
+	}), on(content.hue.input, "input", () => {
+		onColorPickerHue(state);
+	}));
+	if (content.opacity != null) listeners.push(on(content.opacity.input, "input", () => {
+		onColorPickerOpacity(state);
+	}));
+	if (content.output?.toggle != null) listeners.push(on(content.element, "change", (event) => {
+		onColorPickerOutputValue(event, state);
+	}), on(content.element, "input", (event) => {
+		onColorPickerOutputValue(event, state);
+	}), on(content.output.toggle, "change", () => {
+		onColorPickerOutputFormat(state);
+	}));
+	colorPickers.add(state);
+}
+function detachColorPicker(state) {
+	const { component } = state;
+	const { anchor, content, floatable, host, input, label, style } = component;
+	floatable?.destroy();
+	setAria(host, {
+		describedby: void 0,
+		labelledby: void 0
+	});
+	setAttributes(host, { name: void 0 });
+	label.element.htmlFor = input.id;
+	label.element.id = label.id;
+	anchor.container.before(input);
+	anchor.container.remove();
+	content.element.remove();
+	style.remove();
+	const listeners = component.listeners.splice(0);
+	const { length } = listeners;
+	for (let index = 0; index < length; index += 1) listeners[index]();
+	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 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}"]`);
+	if (label == null) throw new Error(COLOR_PICKER_MESSAGE_LABEL);
+	element.id = input.id;
+	const id = getColorPickerId();
+	const labelId = label.id;
+	const alpha = element.hasAttribute("alpha");
+	const color = getColor(input.value);
+	const copy = element.hasAttribute("copy");
+	const disabled = element.hasAttribute("disabled") || input.disabled;
+	const inline = element.hasAttribute("inline");
+	const output = getColorPickerOutput(element);
+	const readonly = element.hasAttribute("readonly") || input.readOnly;
+	const required = element.hasAttribute("required") || input.required;
+	const parameters = {
+		alpha,
+		color,
+		copy,
+		id,
+		inline,
+		input,
+		output
+	};
+	const anchor = createColorPickerAnchor(parameters);
+	const content = createColorPickerContent(parameters);
+	const formatted = color.toHexString(alpha);
+	state.component = {
+		alpha,
+		anchor,
+		content,
+		copy,
+		disabled,
+		id,
+		inline,
+		input,
+		output,
+		readonly,
+		required,
+		color: {
+			foreground: "",
+			value: color
+		},
+		host: element,
+		label: {
+			element: label,
+			id: labelId
+		},
+		listeners: [],
+		localizations: {
+			component: {},
+			global: colorPickerLocalizations
+		},
+		style: createElement("style"),
+		value: {
+			current: formatted,
+			initial: formatted
+		}
+	};
+	attachColorPicker(state);
+	setAttributes(element, {
+		output,
+		alpha: alpha ? "" : void 0,
+		copy: copy ? "" : void 0,
+		inline: inline ? "" : void 0
+	});
+	setColorPickerDisabled(state, "disabled", disabled);
+	setColorPickerDisabled(state, "readonly", readonly);
+	setColorPickerRequired(state, required);
+	setColorPickerValues(state, false);
+	updateColorPickerLabels(state);
+	updateColorPickerValidity(state, isHexColor(state.component.value.current, alpha));
+	return state.component;
+}
+const colorPickers = /* @__PURE__ */ new Set();
+//#endregion
+//#region src/js/color-picker/color-picker.misc.ts
+function getColorPickerId() {
+	index += 1;
+	return `oui_color_picker_${index}`;
+}
+function getColorPickerOutput(element) {
+	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, alpha): return alpha ? "hexa" : "hex";
+		case isHslColor(value): return "hsl";
+		case isHslaColor(value): return "hsla";
+		case isHwbColor(value): return "hwb";
+		case isHwbaColor(value): return "hwba";
+		case isRgbColor(value): return "rgb";
+		case isRgbaColor(value): return "rgba";
+	}
+}
+function setColorPickerLocalizations(first, second) {
+	updateColorPickerLocalizations(colorPickerLocalizations, colorPickerLocalizations.values, first, second);
+}
+function setColorPickerDisabled(state, type, value) {
+	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) {
+	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.component.color.value[actual] = value;
+	setColorPickerValues(state, true);
+}
+function setColorPickerValues(state, focus, input) {
+	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(component.alpha);
+	anchor.input.value = value;
+	content.hue.input.valueAsNumber = hue;
+	if (content.opacity != null) content.opacity.input.valueAsNumber = alpha;
+	component.value.current = value;
+	style.textContent = `#${host.id} {
+	--oui-color-picker-alpha: ${alpha};
+	--oui-color-picker-blue: ${blue};
+	--oui-color-picker-green: ${green};
+	--oui-color-picker-foreground: #${color.foreground};
+	--oui-color-picker-hex: #${hex};
+	--oui-color-picker-hue: ${hue};
+	--oui-color-picker-lightness: ${lightness};
+	--oui-color-picker-red: ${red};
+	--oui-color-picker-saturation: ${saturation};
+}`;
+	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.component;
+	const { component, global } = localizations;
+	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);
+	updateColorPickerWell(state);
+	if (content.opacity != null) content.opacity.label.textContent = localize(getLocalization(global, host, "opacity", component), {}, []);
+}
+function updateColorPickerLocalizations(instance, destination, first, second) {
+	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
+		for (const state of colorPickers) updateColorPickerLabels(state);
+	});
+}
+function updateColorPickerWell(state) {
+	const { color, content, host, localizations } = state.component;
+	const { component, global } = localizations;
+	const { lightness, saturation } = color.value.hsl;
+	setAria(content.well.knob, "valuetext", localize(getLocalization(global, host, "wellValue", component), {
+		lightness,
+		saturation
+	}, [lightness, saturation]));
+}
+let index = 0;
+//#endregion
+//#region src/js/color-picker/color-picker.event.ts
+function cancelMove(parameters) {
+	parameters.state.component.color.value.hexa = parameters.value;
+	setColorPickerValues(parameters.state, true);
+	colorPickerMovement.parameters = void 0;
+	styleToggler.remove();
+}
+function onClick(event) {
+	const button = findAncestor(event, COLOR_PICKER_SELECTOR_COPY);
+	if (!(button instanceof HTMLButtonElement)) return;
+	setAttributes(button, {
+		[COLOR_PICKER_ATTRIBUTE_COPY_ERROR]: void 0,
+		[COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS]: void 0
+	});
+	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);
+		copy.timer = void 0;
+	}
+	const color = button.dataset.color ?? getColorPickerOutputFormat(state);
+	if (color == null) return;
+	let value;
+	switch (color) {
+		case "hex":
+			value = component.color.value.toHexString(component.alpha);
+			break;
+		case "hsl":
+			value = component.color.value.toHslString(component.alpha);
+			break;
+		case "hwb":
+			value = component.color.value.toHwbString(component.alpha);
+			break;
+		case "rgb": value = component.color.value.toRgbString(component.alpha);
+	}
+	if (value != null) copyValue(value, () => {
+		updateColorPickerCopy(copy, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS);
+	}, () => {
+		updateColorPickerCopy(copy, COLOR_PICKER_ATTRIBUTE_COPY_ERROR);
+	});
+}
+function onColorPickerHue(state) {
+	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 { 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;
+	component.value.current = anchor.input.value;
+	const { length } = value;
+	let valid;
+	if (alpha) valid = isHexColor(value, true) && (length === 4 || length === 8);
+	else valid = isHexColor(value) && (length === 3 || length === 6);
+	if (valid) {
+		if (length === 3 || length === 6) color.value.hex = value;
+		else color.value.hexa = value;
+	}
+	setColorPickerValues(state, false, anchor.input.value);
+	dispatch(host, new OuiColorPickerEvent("oui:input", color.value, valid));
+}
+function onColorPickerOpacity(state) {
+	const { component } = state;
+	const opacity = component.content.opacity?.input.valueAsNumber;
+	if (opacity == null) return;
+	component.color.value.alpha = opacity;
+	setColorPickerValues(state, false);
+}
+function onColorPickerOutputFormat(state) {
+	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 (content.output?.copy != null) updateColorPickerOutputCopyLabel(state, content.output.copy.button);
+}
+function onColorPickerOutputValue(event, state) {
+	const input = findAncestor(event, COLOR_PICKER_SELECTOR_OUTPUT_INPUT);
+	if (!(input instanceof HTMLInputElement)) return;
+	const color = input.dataset.color;
+	const property = input.dataset.property;
+	if (color == null || property == null) return;
+	if (outputTimer != null) clearTimeout(outputTimer);
+	outputTimer = setTimeout(() => {
+		outputTimer = void 0;
+		state.component.color.value[color] = {
+			...state.component.color.value[color],
+			[property]: input.valueAsNumber
+		};
+		setColorPickerValues(state, false);
+	});
+}
+function onEnter(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);
+	form.internals.form?.requestSubmit();
+}
+function onKeydown(event) {
+	if (colorPickerMovement.parameters != null && event.key === "Escape") {
+		cancelMove(colorPickerMovement.parameters);
+		return;
+	}
+	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 = 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 } = component.color.value.hsl;
+	switch (event.key) {
+		case "ArrowDown":
+			lightness -= 1 * modifier;
+			break;
+		case "ArrowLeft":
+			saturation -= 1 * modifier;
+			break;
+		case "ArrowRight":
+			saturation += 1 * modifier;
+			break;
+		case "ArrowUp":
+			lightness += 1 * modifier;
+			break;
+		case "End":
+			lightness = 0;
+			break;
+		case "Home":
+			lightness = 100;
+			break;
+		case "PageDown":
+			lightness -= 10;
+			break;
+		case "PageUp": lightness += 10;
+	}
+	component.color.value.hsl = {
+		...state.component.color.value.hsl,
+		lightness: clamp(lightness, 0, 100),
+		saturation: clamp(saturation, 0, 100)
+	};
+	setColorPickerValues(state, false);
+}
+function onPointerdown(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
+	const well = findAncestor(event, COLOR_PICKER_SELECTOR_WELL);
+	if (well == null) return;
+	const element = findAncestor(event, COLOR_PICKER_TAGNAME);
+	if (element == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	if (getEventPosition(event) == null) 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.component.color.value.hexa
+	};
+	styleToggler.set();
+}
+function onPointermove(event) {
+	if (colorPickerMovement.parameters == null) return;
+	const position = getEventPosition(event);
+	if (position != null) updateColorPickerValues(colorPickerMovement.parameters, position);
+}
+function onPointerup(event) {
+	if (colorPickerMovement.parameters == null) return;
+	const position = getEventPosition(event);
+	if (position != null) updateColorPickerValues(colorPickerMovement.parameters, position);
+	colorPickerMovement.parameters = void 0;
+	styleToggler.remove();
+}
+function updateColorPickerCopy(copy, attribute) {
+	const { button } = copy;
+	setAttribute(button, attribute, "");
+	copy.timer = setTimeout(() => {
+		copy.timer = void 0;
+		setAttribute(button, attribute, void 0);
+	}, styleTime);
+}
+function updateColorPickerValues(parameters, position) {
+	const { rectangle, state } = parameters;
+	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.component.color.value.hsl = {
+		...state.component.color.value.hsl,
+		lightness: (1 - top) * 100,
+		saturation: left * 100
+	};
+	setColorPickerValues(state, true);
+}
+const styleToggler = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+const colorPickerMovement = {};
+const styleTime = 2500;
+let outputTimer;
+on(document, "click", onClick);
+on(document, "keydown", onKeydown, { passive: false });
+on(document, "mousedown", onPointerdown);
+on(document, "pointermove", onPointermove);
+on(document, "pointerup", onPointerup);
+on(document, "touchcancel", onPointerup);
+on(document, "touchstart", onPointerdown, { passive: false });
+//#endregion
+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/combobox.dom.d.mts

@@ -0,0 +1,26 @@
+import { c as OuiListboxPreview } from "../listbox.model-CuBOj4qe.mjs";
+import { CreateListboxContent, CreateListboxContentParameters } from "../internal/listbox/listbox.dom.mjs";
+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;
+  selection?: OuiComboboxSelection;
+};
+type CreateSelectionItemsParameters = {
+  container: HTMLElement;
+  items: OuiComboboxSelectionItem[];
+  options: HTMLElement[];
+  state?: OuiComboboxState;
+};
+export declare function createComboboxAnchor(parameters: CreateListboxContentParameters): CreateAnchor;
+export declare function createComboboxButton(parameters: CreateListboxContentParameters): CreateAnchor;
+export declare function createComboboxContent(parameters: CreateListboxContentParameters): CreateListboxContent;
+export declare function createComboboxSelection(id: string, select: HTMLSelectElement): OuiComboboxSelection;
+export declare function createComboboxSelectionItem(option: HTMLElement, state?: OuiComboboxState): OuiComboboxSelectionItem;
+export declare function createComboboxSelectionItems(parameters: CreateSelectionItemsParameters): void;
+export declare function updateComboboxTabindices(state: OuiComboboxState, active?: HTMLElement): void;
+export declare function updateComboboxAutocomplete(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
+export declare function updateComboboxSelection(state: OuiComboboxState, active: HTMLElement | undefined, added: boolean, selected?: HTMLElement[]): void;
+export declare function updateComboboxSelectionItems(state: OuiComboboxState): void;
+//#endregion