@oscarpalmer/oui 0.34.0 → 0.36.0

package/dist/js/listbox/index.mjs

@@ -0,0 +1,189 @@
+import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-BWd0PCy7.mjs";
+import { attachListbox, detachListbox } from "../internal/listbox/listbox.state.mjs";
+import { LISTBOX_TAGNAME } from "./constants.listbox.mjs";
+import { c as onDetachListbox, i as createListboxState, n as setListboxLocalizations, o as listboxStates, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-BI-XsTOf.mjs";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+import { parse } from "@oscarpalmer/atoms/string";
+//#region src/js/listbox/index.ts
+var OuiListboxElement = class extends HTMLElement {
+	static formAssociated = true;
+	static observedAttributes = [
+		"max",
+		"min",
+		"required",
+		"value"
+	];
+	#internals;
+	#restored;
+	#state;
+	/**
+	* Is the listbox disabled?
+	*/
+	get disabled() {
+		return this.#state?.disabled ?? false;
+	}
+	/**
+	* Should the listbox be disabled?
+	*/
+	set disabled(value) {
+		if (typeof value === "boolean" && value !== this.disabled) setListboxDisabled(this.#state, value);
+	}
+	/**
+	* Current filter value
+	*/
+	get filter() {
+		return this.#state.filter.element.value;
+	}
+	/**
+	* Set the filter value
+	*/
+	set filter(value) {
+		setListboxFilter(this.#state, value);
+	}
+	/**
+	* Maximum number of selected options
+	*/
+	get max() {
+		return this.#state?.max;
+	}
+	/**
+	* Set the maximum number of selected options
+	*/
+	set max(value) {
+		setListboxLimit("max", this.#state, value);
+	}
+	/**
+	* Minimum number of selected options
+	*/
+	get min() {
+		return this.#state?.min;
+	}
+	/**
+	* Set the minimum number of selected options
+	*/
+	set min(value) {
+		setListboxLimit("min", this.#state, value);
+	}
+	/**
+	* Does the listbox allow multiple values?
+	*/
+	get multiple() {
+		return this.hasAttribute("multiple");
+	}
+	/**
+	* Name of the listbox
+	*/
+	get name() {
+		return getAttribute(this, "name") ?? "";
+	}
+	/**
+	* Is the listbox readonly?
+	*/
+	get readonly() {
+		return this.#state?.readonly ?? false;
+	}
+	/**
+	* Should the listbox be readonly?
+	*/
+	set readonly(value) {
+		if (typeof value === "boolean" && value !== this.readonly) setListboxReadonly(this.#state, value);
+	}
+	/**
+	* Is the listbox required?
+	*/
+	get required() {
+		return this.#state?.required ?? false;
+	}
+	/**
+	* Should the listbox be required?
+	*/
+	set required(value) {
+		if (typeof value === "boolean" && value !== this.required) setListboxRequired(this.#state, value);
+	}
+	/**
+	* Selected options
+	*/
+	get selected() {
+		return this.#state.options.selected.slice();
+	}
+	/**
+	* Current value
+	*/
+	get value() {
+		return this.#state.values.current[0];
+	}
+	/**
+	* Set the value
+	*/
+	set value(value) {
+		setListboxValue(this.#state, value);
+	}
+	/**
+	* Current values
+	*/
+	get values() {
+		return this.#state.values.current.slice();
+	}
+	/**
+	* Set the values
+	*/
+	set values(values) {
+		setListboxValues(this.#state, values);
+	}
+	constructor() {
+		super();
+		this.#internals = this.attachInternals();
+	}
+	attributeChangedCallback(name, _, value) {
+		if (this.#state == null) return;
+		switch (name) {
+			case "required":
+				this[name] = this.hasAttribute(name);
+				break;
+			case "max":
+			case "min":
+				setListboxLimit(name, this.#state, value);
+				break;
+			case "value": this.value = value ?? "";
+		}
+	}
+	/**
+	* Clear all selected options
+	*/
+	clear() {
+		setListboxValues(this.#state, []);
+	}
+	connectedCallback() {
+		if (this.#state == null) this.#initialize();
+		else attachListbox(this.#state, listboxStates, onAttachListbox);
+	}
+	disconnectedCallback() {
+		if (this.#state != null) detachListbox(this.#state, listboxStates, onDetachListbox);
+	}
+	formDisabledCallback(disabled) {
+		this.disabled = disabled;
+	}
+	formResetCallback() {
+		setListboxValues(this.#state, this.#state.values.initial);
+	}
+	formStateRestoreCallback(state, reason) {
+		if (reason !== "restore") return;
+		const parsed = typeof state === "string" ? parse(state) : void 0;
+		if (!Array.isArray(parsed)) return;
+		if (this.#state == null) this.#restored = parsed;
+		else setListboxValues(this.#state, parsed);
+	}
+	setLocalizations(first, second) {
+		updateListboxLocalizations(this.#state.localizations.global, this.#state.localizations.component, first, second);
+	}
+	#initialize() {
+		this.#state = createListboxState(this, this.#internals);
+		if (this.#restored != null) {
+			setListboxValues(this.#state, this.#restored);
+			this.#restored = void 0;
+		}
+	}
+};
+customElements.define(LISTBOX_TAGNAME, OuiListboxElement);
+//#endregion
+export { OuiListboxElement, setListboxLocalizations };

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

@@ -0,0 +1,2 @@
+import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-gnoJhrTr.mjs";
+export { getListboxId, setListboxLocalizations, updateListboxLocalizations };

package/dist/js/listbox/misc.listbox.mjs

@@ -0,0 +1,2 @@
+import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-BI-XsTOf.mjs";
+export { getListboxId, setListboxLocalizations, updateListboxLocalizations };

package/dist/js/listbox/state.listbox.d.mts

@@ -0,0 +1,11 @@
+import { t as OuiLocalizations } from "../l10n-Bn-7RcwR.mjs";
+import { l as OuiListboxState, o as OuiListboxLocalizations, u as OuiListboxStates } from "../listbox.model-CRReGOmu.mjs";
+import { OuiListboxElement } from "./index.mjs";
+//#region src/js/listbox/state.listbox.d.ts
+declare function createListboxState(element: OuiListboxElement, internals: ElementInternals): OuiListboxState;
+declare function onAttachListbox(state: OuiListboxState): void;
+declare function onDetachListbox(state: OuiListboxState): void;
+declare const listboxLocalizations: OuiLocalizations<OuiListboxLocalizations>;
+declare const listboxStates: OuiListboxStates;
+//#endregion
+export { createListboxState, listboxLocalizations, listboxStates, onAttachListbox, onDetachListbox };

package/dist/js/listbox/state.listbox.mjs

@@ -0,0 +1,2 @@
+import { a as listboxLocalizations, c as onDetachListbox, i as createListboxState, o as listboxStates, s as onAttachListbox } from "../misc.listbox-BI-XsTOf.mjs";
+export { createListboxState, listboxLocalizations, listboxStates, onAttachListbox, onDetachListbox };

package/dist/js/listbox.data-BWd0PCy7.mjs

@@ -0,0 +1,424 @@
+import { getLocalization, localize } from "./l10n.mjs";
+import { listboxScrollOptions } from "./internal/listbox/listbox.constants.mjs";
+import { updateListboxForm, updateListboxValidity } from "./internal/listbox/listbox.form.mjs";
+import { setAria } from "@oscarpalmer/toretto/aria";
+import { dispatch } from "@oscarpalmer/toretto/event";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { getString } from "@oscarpalmer/atoms/string";
+import { getData } from "@oscarpalmer/toretto/data";
+import { createElement, setAria as setAria$1, setAttribute as setAttribute$1 } from "@oscarpalmer/toretto";
+//#region src/js/internal/listbox/listbox.misc.ts
+function generateListboxIds(prefix, select) {
+	const elements = [...select.children].flatMap((child) => child instanceof HTMLOptGroupElement ? [child, ...[...child.children].filter((groupChild) => groupChild instanceof HTMLOptionElement)] : child instanceof HTMLOptionElement ? [child] : []);
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		if (element.id === "") element.id = `${prefix}${element instanceof HTMLOptGroupElement ? "_group_" : "_option_"}${index}`;
+	}
+}
+function getListboxVisibleOptions(state) {
+	return state.options.all.filter((option) => !option.hidden);
+}
+function setListboxDisabled(state, value) {
+	state.filter.element.readOnly = state.readonly || value;
+	setProperties("disabled", state, value);
+}
+function setListboxFilter(state, value) {
+	if (typeof value !== "string") return;
+	const type = value.length < state.filter.element.value.length ? "deleteContentBackward" : "insertText";
+	state.filter.element.value = value;
+	filterListbox(type, state);
+}
+function setListboxLimit(type, state, value) {
+	let actual = value;
+	if (typeof actual === "string") actual = Number.parseInt(actual, 10);
+	if (typeof actual === "number" && !Number.isNaN(actual) && actual >= 0 ? actual !== state[type] : actual == null) {
+		state[type] = actual;
+		setAttribute(state.host, type, actual);
+		updateListboxValidity(state);
+	}
+}
+function setListboxMultiple(element, value) {
+	if (value) element.setAttribute("multiple", "");
+	else element.removeAttribute("multiple");
+}
+function setProperties(key, state, value) {
+	state[key] = value;
+	const { length } = state.elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = state.elements[index];
+		if (element == null) continue;
+		setAria(element, key, key !== "readonly" || !(element instanceof HTMLButtonElement) ? value : void 0);
+	}
+}
+function setListboxReadonly(state, value) {
+	state.filter.element.readOnly = state.disabled || value;
+	setProperties("readonly", state, value);
+}
+function setListboxRequired(state, value) {
+	setProperties("required", state, value);
+	updateListboxValidity(state);
+}
+//#endregion
+//#region src/js/internal/listbox/listbox.dom.ts
+function createListboxContent(parameters) {
+	const element = createElement("div", { attribute: { [parameters.attributes.content]: "" } });
+	const filter = createListboxFilter(parameters);
+	const list = createListboxList(parameters);
+	const message = createListboxMessage(parameters.attributes.message);
+	const value = createListboxValueLabel(parameters.id);
+	if (filter != null) element.append(filter.container);
+	element.append(list.element, message, value);
+	return {
+		element,
+		filter,
+		list,
+		message,
+		value
+	};
+}
+function createListboxFilter(parameters) {
+	if (parameters.type === "autocomplete") return;
+	const container = createElement("div", { attribute: { [parameters.attributes.filter]: "" } });
+	const element = createListboxInput(parameters, "");
+	setAttribute$1(element, parameters.attributes.input, "");
+	container.append(element);
+	return {
+		container,
+		element
+	};
+}
+function createListboxGroup(parameters) {
+	const { group, groupOptions, selected, type } = parameters;
+	const element = createElement("li", {
+		aria: { label: group.label },
+		property: { role: "group" }
+	});
+	const list = createElement("ul", { property: { role: "none" } });
+	const header = createListboxHeader(parameters, group);
+	element.append(header, list);
+	return {
+		element,
+		header,
+		options: createListboxOptions({
+			list,
+			selected,
+			type,
+			group: header.id,
+			options: groupOptions,
+			original: parameters.original
+		})
+	};
+}
+function createListboxHeader(parameters, group) {
+	return createElement("div", {
+		aria: { hidden: true },
+		attribute: { [parameters.original.attributes.header]: "" },
+		property: {
+			id: group.id,
+			textContent: group.label
+		}
+	});
+}
+function createListboxInput(parameters, value) {
+	const { autocomplete, id, label, listbox, type } = parameters;
+	const isAutocomplete = type === "autocomplete";
+	const input = createElement("input", {
+		aria: {
+			autocomplete: autocomplete.value,
+			controls: `${id}_list`,
+			haspopup: isAutocomplete ? "listbox" : void 0,
+			labelledby: label.id
+		},
+		attribute: {
+			autocorrect: "off",
+			autocomplete: "off",
+			form: "",
+			spellcheck: "false",
+			type: "text"
+		},
+		property: {
+			id,
+			value,
+			role: isAutocomplete || listbox ? "combobox" : "searchbox"
+		}
+	});
+	if (isAutocomplete || listbox) setAria$1(input, "expanded", listbox);
+	return input;
+}
+function createListboxList(parameters) {
+	const { attributes, id, label, multiple, select, type } = parameters;
+	const element = createElement("ul", {
+		aria: {
+			labelledby: label.id,
+			multiselectable: multiple
+		},
+		attribute: {
+			[attributes.list]: "",
+			tabindex: -1
+		},
+		property: {
+			id: `${id}_list`,
+			role: "listbox"
+		}
+	});
+	const children = [...select.children];
+	const childrenLength = children.length;
+	const options = [];
+	const selected = [];
+	let groups;
+	for (let childIndex = 0; childIndex < childrenLength; childIndex += 1) {
+		const child = children[childIndex];
+		if (child instanceof HTMLOptionElement) {
+			const option = createListboxOption({
+				type,
+				option: child,
+				original: parameters,
+				index: childIndex
+			});
+			element.append(option);
+			options.push(option);
+			if (child.selected) selected.push(option);
+			continue;
+		}
+		if (!(child instanceof HTMLOptGroupElement)) continue;
+		const group = createListboxGroup({
+			selected,
+			type,
+			group: child,
+			groupOptions: [...child.children],
+			original: parameters
+		});
+		groups ??= [];
+		element.append(group.element);
+		groups.push(group);
+		options.push(...group.options);
+	}
+	return {
+		element,
+		groups,
+		options: {
+			selected,
+			all: options
+		}
+	};
+}
+function createListboxMessage(attribute) {
+	return createElement("div", {
+		aria: { live: "polite" },
+		attribute: { [attribute]: "" },
+		property: {
+			hidden: true,
+			role: "status"
+		}
+	});
+}
+function createListboxOption(parameters) {
+	const { group, option, original } = parameters;
+	return createElement("li", {
+		aria: { selected: (parameters.type === "select" || !original.autocomplete.none) && option.selected },
+		attribute: { [original.attributes.option]: "" },
+		data: {
+			group,
+			value: option.value
+		},
+		property: {
+			id: option.id,
+			role: "option",
+			textContent: option.textContent
+		}
+	});
+}
+function createListboxOptions(parameters) {
+	const { group, list, options, original, selected, type } = parameters;
+	const items = [];
+	for (let index = 0; index < options.length; index += 1) {
+		const option = options[index];
+		const item = createListboxOption({
+			group,
+			index,
+			option,
+			original,
+			type
+		});
+		items.push(item);
+		if (option.selected) selected.push(item);
+		list.append(item);
+	}
+	return items;
+}
+function createListboxValueLabel(id) {
+	return createElement("span", { property: {
+		hidden: true,
+		id: `${id}_value`
+	} });
+}
+function updateListboxMessage(state) {
+	const { attributes, host, localizations, message } = state;
+	const visible = getListboxVisibleOptions(state).length;
+	setAttribute$1(message, attributes.hidden, visible > 0 ? "" : void 0);
+	let data = {};
+	let parameters = [];
+	let key;
+	if (visible === 0) key = "empty";
+	else {
+		data = { amount: visible };
+		key = "results";
+		parameters = [visible];
+	}
+	const localization = getLocalization(localizations.global, host, key, localizations.component);
+	message.textContent = localize(localization, data, parameters);
+	message.hidden = false;
+}
+function updateListboxPreview(preview, state, active, scroll) {
+	const { length } = state.options.all;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		setAttribute$1(option, state.attributes.active, option === active ? "" : void 0);
+	}
+	state.active = active;
+	setAria$1(state.filter.element, "activedescendant", state.content.checkVisibility() ? active?.id : void 0);
+	if (scroll ?? true) active?.scrollIntoView(listboxScrollOptions);
+	if (preview !== "none") state.callbacks.data.onPreview(preview, state, active);
+}
+function updateListboxValueLabel(state) {
+	let label;
+	if (state.multiple) {
+		const localization = getLocalization(state.localizations.global, state.host, "selected", state.localizations.component);
+		const { length } = state.options.selected;
+		label = localize(localization, { amount: length }, [length]);
+	} else label = state.autocomplete.none && !state.listbox ? state.filter.element.value : state.options.selected[0]?.textContent ?? "";
+	state.values.label.textContent = label;
+}
+//#endregion
+//#region src/js/internal/listbox/listbox.data.ts
+function applyListboxSelection(parameters) {
+	const { added, emit, option, scroll, selected, state } = parameters;
+	const { length } = state.options.all;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		setAria(option, "selected", (state.type === "select" || !state.autocomplete.none) && (selected ?? state.options.selected).includes(option));
+	}
+	const values = parameters.values ?? (state.autocomplete.none && !state.listbox ? [state.filter.element.value] : (selected ?? state.options.selected).map((option) => getData(option, "value", false) ?? ""));
+	if (values.length === 0) values.push("");
+	if (selected != null) state.options.selected = selected;
+	if (!(values.length === state.values.current.length ? values.some((value) => !state.values.current.includes(value)) : true)) return;
+	updateListboxForm(state, values, emit);
+	updateListboxMessage(state);
+	updateListboxPreview("set", state, option, scroll);
+	updateListboxValueLabel(state);
+	state.callbacks.data.onApply(state, option, values, added, selected, emit);
+}
+function filterListbox(type, state) {
+	if (state.disabled || state.readonly) return;
+	const update = state.filter.element.value !== state.filter.value;
+	const option = filterListboxOptions(state);
+	let preview;
+	if (type.includes("delete")) preview = "none";
+	else if (type.includes("insert")) preview = "typed";
+	if (preview != null) state.callbacks.data.onFilter(preview, state, update, option);
+	if (update) {
+		state.filter.value = state.filter.element.value;
+		dispatch(state.host, "input");
+	}
+}
+function filterListboxOption(state, value, textContent) {
+	const filterTextContent = textContent ?? false;
+	const filter = getString(value).toLocaleLowerCase();
+	filterListboxOptions(state);
+	const { length } = state.options.all;
+	let match;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		if ((filterTextContent ? option.textContent : getData(option, "value", false) ?? "").toLocaleLowerCase() === filter) {
+			match = option;
+			break;
+		}
+	}
+	return match;
+}
+function filterListboxOptions(state) {
+	function filter(options) {
+		const { length } = options;
+		let count = 0;
+		for (let index = 0; index < length; index += 1) {
+			const option = options[index];
+			option.hidden = (state.type === "select" || !state.autocomplete.none) && !option.textContent.toLocaleLowerCase().includes(value);
+			if (!option.hidden) {
+				count += 1;
+				visible.push(option);
+			}
+		}
+		return count === 0;
+	}
+	const value = state.filter.element.value.toLocaleLowerCase();
+	const visible = [];
+	if (state.groups == null) filter(state.options.all);
+	else {
+		const groupsLength = state.groups.length;
+		for (let groupIndex = 0; groupIndex < groupsLength; groupIndex += 1) {
+			const { element, options } = state.groups[groupIndex];
+			element.hidden = filter(options);
+		}
+	}
+	setAttribute(state.list, state.attributes.empty, visible.length === 0 ? "" : void 0);
+	updateListboxMessage(state);
+	return state.active != null && visible.includes(state.active) ? state.active : visible[0];
+}
+function setListboxValue(state, value, emit) {
+	if (state.autocomplete.none && !state.listbox) {
+		setListboxFilter(state, getString(value));
+		return;
+	}
+	if (filterListboxOption(state, value) != null) setListboxValues(state, [value], emit);
+}
+function setListboxValues(state, value, emit) {
+	if (!Array.isArray(value)) return;
+	const values = (state.multiple ? value : value.slice(0, 1)).map((value) => getString(value).toLocaleLowerCase());
+	if (values.length === 0) values.push("");
+	if (state.autocomplete.none && !state.listbox) {
+		setListboxValue(state, values[0], emit);
+		return;
+	}
+	const { length } = state.options.all;
+	const selected = [];
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		if (values.includes(getData(option, "value", false)?.toLocaleLowerCase() ?? "")) selected.push(option);
+	}
+	applyListboxSelection({
+		emit,
+		selected,
+		state,
+		added: true,
+		option: selected[0] ?? state.options.all[0],
+		values: state.autocomplete.none && !state.listbox ? values : void 0
+	});
+}
+function toggleListboxOption(state, option) {
+	if (option == null || !state.multiple && state.options.selected.includes(option)) {
+		state.callbacks.data.onToggle(state);
+		return;
+	}
+	const selected = state.options.selected.slice();
+	let added = true;
+	if (state.multiple) {
+		const index = selected.indexOf(option);
+		if (index === -1) selected.push(option);
+		else {
+			added = false;
+			selected.splice(index, 1);
+		}
+	} else selected.splice(0, selected.length, option);
+	applyListboxSelection({
+		added,
+		option,
+		selected,
+		state,
+		scroll: false,
+		values: state.autocomplete.none && !state.listbox && option != null ? [option.textContent] : void 0
+	});
+	state.callbacks.data.onToggle(state);
+}
+//#endregion
+export { setListboxDisabled as C, setListboxReadonly as D, setListboxMultiple as E, setListboxRequired as O, getListboxVisibleOptions as S, setListboxLimit as T, createListboxValueLabel as _, setListboxValue as a, updateListboxValueLabel as b, createListboxContent as c, createListboxHeader as d, createListboxInput as f, createListboxOptions as g, createListboxOption as h, filterListboxOptions as i, createListboxFilter as l, createListboxMessage as m, filterListbox as n, setListboxValues as o, createListboxList as p, filterListboxOption as r, toggleListboxOption as s, applyListboxSelection as t, createListboxGroup as u, updateListboxMessage as v, setListboxFilter as w, generateListboxIds as x, updateListboxPreview as y };