@oscarpalmer/oui 0.35.0 → 0.37.0

package/dist/js/misc.listbox-BI-XsTOf.mjs

@@ -0,0 +1,197 @@
+import { getLocalizations, updateLocalizations } from "./l10n.mjs";
+import { b as updateListboxValueLabel, c as createListboxContent, n as filterListbox, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-BWd0PCy7.mjs";
+import { initializeListboxState } from "./internal/listbox/listbox.state.mjs";
+import { getBooleanAriaValue } from "./internal/misc.mjs";
+import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
+import { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME } from "./listbox/constants.listbox.mjs";
+import { on } from "@oscarpalmer/toretto/event";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { getData } from "@oscarpalmer/toretto/data";
+import { noop } from "@oscarpalmer/atoms/function";
+//#region src/js/listbox/event.listbox.ts
+function onListboxClick(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listboxStates.map.get(listbox);
+	if (listbox == null || state == null) return;
+	const option = findAncestor(event, LISTBOX_SELECTORS.option);
+	if (option == null) return;
+	if (state.disabled) state.filter.element.focus();
+	else if (state.readonly) updateListboxPreview("none", state, option, false);
+	else toggleListboxOption(state, option);
+}
+function onListboxEnter(state) {
+	if (!state.disabled && !state.readonly) toggleListboxOption(state, state.active);
+}
+function onListboxFilter(preview, state, _, active) {
+	updateListboxPreview(preview, state, active);
+}
+function onListboxInput(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listboxStates.map.get(listbox);
+	if (state?.filter.element === event.target) filterListbox(event.inputType, state);
+}
+function onListboxKeydown(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listboxStates.map.get(listbox);
+	if (state?.filter.element === event.target) processListboxKeydown(event, state);
+}
+function onListboxNavigation(preview, state, active) {
+	if (state.multiple || state.readonly) updateListboxPreview(preview, state, active);
+	else applyListboxSelection({
+		state,
+		option: active,
+		added: true,
+		selected: active == null ? [] : [active]
+	});
+}
+function onListboxToggle(state) {
+	state.filter.element.focus();
+}
+on(document, "click", onListboxClick);
+on(document, "input", onListboxInput);
+on(document, "keydown", onListboxKeydown, { passive: false });
+//#endregion
+//#region src/js/listbox/state.listbox.ts
+function createListboxState(element, internals) {
+	const select = element.querySelector("select");
+	if (select == null) throw new Error(LISTBOX_MESSAGES.select);
+	const label = element.querySelector(`label[for="${select.id}"]`);
+	if (label == null) throw new Error(LISTBOX_MESSAGES.label);
+	element.id = select.id;
+	setAttribute(element, "name", select.name === "" ? select.id : select.name);
+	const disabled = getBooleanAriaValue(element, "disabled") || select.disabled;
+	const multiple = element.multiple || select.multiple;
+	const readonly = getBooleanAriaValue(element, "readonly");
+	const required = getBooleanAriaValue(element, "required") || select.required;
+	setAttributes(element, {
+		autocomplete: "none",
+		name: select.name === "" ? select.id : select.name
+	});
+	const id = getListboxId();
+	const labelId = label.id;
+	label.htmlFor = id;
+	label.id = `${id}_label`;
+	generateListboxIds(id, select);
+	const type = "select";
+	const content = createListboxContent({
+		element,
+		id,
+		label,
+		multiple,
+		select,
+		type,
+		attributes: LISTBOX_ATTRIBUTES,
+		autocomplete: listboxAutoComplete,
+		listbox: true
+	});
+	const { selected } = content.list.options;
+	const values = selected.length === 0 ? [""] : selected.map((option) => getData(option, "value", false) ?? "");
+	const state = {
+		disabled,
+		id,
+		internals,
+		message: content.message,
+		multiple,
+		readonly,
+		required,
+		select,
+		type,
+		active: selected[0],
+		attributes: LISTBOX_ATTRIBUTES,
+		autocomplete: listboxAutoComplete,
+		callbacks: listboxCallbacks,
+		content: content.element,
+		elements: [element, content.filter.element],
+		filter: {
+			element: content.filter.element,
+			value: ""
+		},
+		host: element,
+		label: {
+			id: labelId,
+			element: label
+		},
+		list: content.list.element,
+		listeners: [],
+		listbox: true,
+		localizations: {
+			component: {},
+			global: listboxLocalizations
+		},
+		name: element.name,
+		options: content.list.options,
+		values: {
+			current: values.slice(),
+			initial: values.slice(),
+			label: content.value
+		}
+	};
+	return initializeListboxState(state, listboxStates, onAttachListbox);
+}
+function onAttachListbox(state) {
+	const { content, select } = state;
+	select.hidden = true;
+	select.insertAdjacentElement("afterend", content);
+	select.remove();
+}
+function onDetachListbox(state) {
+	const { content, select } = state;
+	content.insertAdjacentElement("beforebegin", select);
+	content.remove();
+	select.hidden = false;
+}
+const listboxAutoComplete = {
+	both: false,
+	inline: false,
+	list: false,
+	none: true
+};
+const listboxCallbacks = {
+	data: {
+		onApply: noop,
+		onFilter: onListboxFilter,
+		onForm: noop,
+		onPreview: noop,
+		onToggle: onListboxToggle
+	},
+	keydown: {
+		onEnter: onListboxEnter,
+		onNavigation: onListboxNavigation,
+		onToggle: onListboxToggle
+	}
+};
+const listboxLocalizations = getLocalizations({
+	empty: "No results found",
+	input: "",
+	invalid: "Please select an option from the list",
+	max: (max) => `Please select fewer options (maximum is ${max})`,
+	min: (min) => `Please select more options (minimum is ${min})`,
+	remove: "",
+	results: (amount) => `${amount} results available`,
+	selected: (amount) => `${amount} selected`
+});
+const listboxStates = {
+	map: /* @__PURE__ */ new WeakMap(),
+	set: /* @__PURE__ */ new Set()
+};
+//#endregion
+//#region src/js/listbox/misc.listbox.ts
+function getListboxId() {
+	index += 1;
+	return `oui_listbox_${index}`;
+}
+function setListboxLocalizations(first, second) {
+	updateListboxLocalizations(listboxLocalizations, listboxLocalizations.values, first, second);
+}
+function updateListboxLocalizations(instance, destination, first, second) {
+	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
+		for (const state of listboxStates.set) {
+			updateListboxMessage(state);
+			updateListboxValueLabel(state);
+		}
+	});
+}
+let index = 0;
+//#endregion
+export { listboxLocalizations as a, onDetachListbox as c, onListboxNavigation as d, onListboxToggle as f, createListboxState as i, onListboxEnter as l, setListboxLocalizations as n, listboxStates as o, updateListboxLocalizations as r, onAttachListbox as s, getListboxId as t, onListboxFilter as u };

package/dist/js/misc.listbox-gnoJhrTr.d.mts

@@ -0,0 +1,20 @@
+import { t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
+import { o as OuiListboxLocalizations } from "./listbox.model-CRReGOmu.mjs";
+//#region src/js/listbox/misc.listbox.d.ts
+declare function getListboxId(): string;
+/**
+ * Set listbox localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+declare function setListboxLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
+/**
+ * Set listbox localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+declare function setListboxLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
+declare function updateListboxLocalizations(instance: OuiLocalizations<OuiListboxLocalizations>, destination: Record<string, Partial<OuiListboxLocalizations>>, first: string | Record<string, Partial<OuiListboxLocalizations>>, second?: Partial<OuiListboxLocalizations>): void;
+//#endregion
+export { setListboxLocalizations as n, updateListboxLocalizations as r, getListboxId as t };

package/dist/js/movable/movable.embedded.mjs

@@ -110,14 +110,11 @@ function onEnd(event, globals, item, reset) {
 	}
 	const container = state.container?.getBoundingClientRect();
 	if (container != null) setOffset(state, container);
-	const dispatched = dispatch(state.element, "movable:end", { detail: {
+	if (dispatch(state.element, "oui:movable:end", { detail: {
 		from: { ...globals.original },
 		to: getEventPosition(event)
-	} });
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) onCancel(globals, item);
-		reset();
-	});
+	} }).defaultPrevented) onCancel(globals, item);
+	reset();
 }
 function onMove(_, globals, __, position) {
 	setAttribute(globals.element?.node, ATTRIBUTE_MOVING, "");

package/dist/js/resizable/resizable.embedded.mjs

@@ -49,7 +49,7 @@ function cancelResize(item) {
 		width: `${item.state.width}px`
 	});
 	resetResizable();
-	dispatch(item.state.element, "resizable:cancel");
+	dispatch(item.state.element, "oui:resizable:cancel");
 }
 /**
 * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
@@ -130,14 +130,11 @@ function onPointerdown(event) {
 	const position = getEventPosition(event);
 	if (stored == null || position == null) return;
 	if (supportsTouch.value) event.preventDefault();
-	const dispatched = dispatch(element, "resizable:begin");
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) return;
-		current = stored;
-		start = position;
-		current.state.styles.set();
-		styleToggler.set();
-	});
+	if (dispatch(element, "oui:resizable:begin").defaultPrevented) return;
+	current = stored;
+	start = position;
+	current.state.styles.set();
+	styleToggler.set();
 }
 function onPointermove(event) {
 	if (current == null) return;
@@ -149,27 +146,20 @@ function onPointermove(event) {
 		height,
 		width
 	});
-	const dispatched = dispatch(current.state.element, "resizable:resize", { detail: {
+	if (dispatch(current.state.element, "oui:resizable:resize", { detail: {
 		height,
 		width
-	} });
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) cancelResize(current);
-	});
+	} }).defaultPrevented) cancelResize(current);
 }
 function onPointerup() {
-	if (current == null) return;
-	const dispatched = dispatch(current.state.element, "resizable:end");
-	setTimeout(() => {
-		if (current == null || dispatched.defaultPrevented) {
-			cancelResize(current);
-			return;
-		}
-		const { height, width } = current.state.element.getBoundingClientRect();
-		current.state.height = height;
-		current.state.width = width;
-		resetResizable();
-	});
+	if (current == null || dispatch(current.state.element, "oui:resizable:end").defaultPrevented) {
+		cancelResize(current);
+		return;
+	}
+	const { height, width } = current.state.element.getBoundingClientRect();
+	current.state.height = height;
+	current.state.width = width;
+	resetResizable();
 }
 function removeResizable(element) {
 	items.get(element)?.instance.destroy();

package/dist/js/sortable/sortable.embedded.mjs

@@ -98,8 +98,10 @@ function onEnd(event, globals, item, reset) {
 	};
 	const target = getElementFromPosition(position)[0];
 	let element = findAncestor(target, SELECTOR_ITEM);
-	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) if (getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
-	else element = element.nextElementSibling;
+	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) {
+		if (getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
+		else element = element.nextElementSibling;
+	}
 	let insert = "insert";
 	let toInstance;
 	let toState;

package/dist/js/splitter.mjs

@@ -6,6 +6,7 @@ import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import supportsTouch from "@oscarpalmer/toretto/touch";
+import { createElement } from "@oscarpalmer/toretto/create";
 import { round } from "@oscarpalmer/atoms/math";
 //#region src/js/splitter.ts
 const ATTRIBUTE_MAX = "max";
@@ -135,21 +136,23 @@ var OuiSplitterElement = class extends HTMLElement {
 	}
 };
 function createHandle() {
-	const handle = document.createElement("span");
-	setAria(handle, "hidden", "true");
-	setAttribute(handle, ATTRIBUTE_HANDLE, "");
-	return handle;
+	return createElement("span", {
+		aria: { hidden: true },
+		attribute: { [ATTRIBUTE_HANDLE]: "" }
+	});
 }
 function createSeparator(splitter) {
-	const separator = document.createElement("div");
-	separator.role = "separator";
-	separator.tabIndex = 0;
-	setAria(separator, {
-		controls: splitter.element.id,
-		label: "Resize panels"
+	return createElement("div", {
+		aria: {
+			controls: splitter.element.id,
+			label: "Resize panels"
+		},
+		attribute: { [ATTRIBUTE_SEPARATOR]: "" },
+		property: {
+			role: "separator",
+			tabIndex: 0
+		}
 	});
-	setAttribute(separator, ATTRIBUTE_SEPARATOR, "");
-	return separator;
 }
 function getContained(min, value, max) {
 	return round(clamp(value, min, max), VALUE_DECIMALS);