@oscarpalmer/oui 0.35.0 → 0.36.0

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 };

package/dist/js/listbox.model-CRReGOmu.d.mts

@@ -0,0 +1,125 @@
+import { n as OuiLocalizationsValues, t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+//#region src/js/internal/listbox/listbox.model.d.ts
+type OuiListboxAttributes = {
+  active: string;
+  content: string;
+  empty: string;
+  filter: string;
+  group: string;
+  header: string;
+  hidden: string;
+  input: string;
+  list: string;
+  message: string;
+  option: string;
+};
+type OuiListboxAutoComplete = Record<OuiListboxAutoCompleteType, boolean> & {
+  value?: OuiListboxAutoCompleteType;
+};
+type OuiListboxAutoCompleteType = 'both' | 'inline' | 'list' | 'none';
+type OuiListboxCallbacks<State extends OuiListboxState = OuiListboxState> = {
+  data: OuiListboxCallbacksData<State>;
+  keydown: OuiListboxCallbacksKeydown<State>;
+};
+type OuiListboxCallbacksData<State extends OuiListboxState = OuiListboxState> = {
+  onApply: OuiListboxCallbacksDataOnApply<State>;
+  onFilter: OuiListboxCallbacksDataOnFilter<State>;
+  onForm: (state: State) => void;
+  onPreview: OuiListboxCallbacksDataOnPreview<State>;
+  onToggle: (state: State) => void;
+};
+type OuiListboxCallbacksDataOnApply<State extends OuiListboxState = OuiListboxState> = (state: State, option: HTMLElement | undefined, values: string[], added: boolean, selected?: HTMLElement[], emit?: boolean) => void;
+type OuiListboxCallbacksDataOnFilter<State extends OuiListboxState = OuiListboxState> = (preview: OuiListboxPreview, state: State, update: boolean, active?: HTMLElement, emit?: boolean) => void;
+type OuiListboxCallbacksDataOnPreview<State extends OuiListboxState = OuiListboxState> = (preview: OuiListboxPreview, state: State, active?: HTMLElement) => void;
+type OuiListboxCallbacksKeydown<State extends OuiListboxState = OuiListboxState> = {
+  onActivation?: (state: State) => void;
+  onEnter?: (state: State) => void;
+  onEscape?: (state: State) => void;
+  onNavigation: OuiListboxCallbacksDataOnNavigation<State>;
+  onSelection?: (state: State) => void;
+  onTab?: (state: State) => void;
+  onToggle?: (state: State) => void;
+  preventActivation?: (state: State) => boolean;
+  skipNavigation?: (state: State) => boolean;
+};
+type OuiListboxCallbacksDataOnNavigation<State extends OuiListboxState = OuiListboxState> = (preview: OuiListboxPreview, state: State, active?: HTMLElement) => void;
+type OuiListboxFilter = {
+  element: HTMLInputElement;
+  value: string;
+};
+type OuiListboxFooter = {
+  container: HTMLElement;
+  message: HTMLElement;
+};
+type OuiListboxGroup = {
+  element: HTMLElement;
+  header: HTMLElement;
+  options: HTMLElement[];
+};
+type OuiListboxLabel = {
+  element: HTMLLabelElement;
+  id: string;
+};
+type OuiListboxLocalization<Localizations extends OuiLocalizationsValues> = {
+  component: Record<string, Partial<Localizations>>;
+  global: OuiLocalizations<Localizations>;
+};
+type OuiListboxLocalizations = {
+  empty: string | (() => string);
+  input: string | (() => string);
+  invalid: string | (() => string);
+  max: string | ((max: number) => string);
+  min: string | ((min: number) => string);
+  remove: string | ((label: string, value: string) => string);
+  results: string | ((amount: number) => string);
+  selected: string | ((amount: number) => string);
+};
+type OuiListboxOptions = {
+  all: HTMLElement[];
+  selected: HTMLElement[];
+};
+type OuiListboxPreview = 'none' | 'set' | 'typed';
+type OuiListboxState = {
+  active?: HTMLElement;
+  attributes: OuiListboxAttributes;
+  autocomplete: OuiListboxAutoComplete;
+  callbacks: OuiListboxCallbacks;
+  content: HTMLDivElement;
+  disabled: boolean;
+  elements: Array<HTMLElement | undefined>;
+  filter: OuiListboxFilter;
+  footer?: OuiListboxFooter;
+  groups?: OuiListboxGroup[];
+  host: HTMLElement;
+  id: string;
+  internals: ElementInternals;
+  label: OuiListboxLabel;
+  list: HTMLUListElement;
+  listbox: boolean;
+  listeners: RemovableEventListener[];
+  localizations: OuiListboxLocalization<OuiListboxLocalizations>;
+  max?: number;
+  min?: number;
+  message: HTMLElement;
+  multiple: boolean;
+  name: string;
+  options: OuiListboxOptions;
+  readonly: boolean;
+  required: boolean;
+  select: HTMLSelectElement;
+  type: OuiListboxType;
+  values: OuiListboxValues;
+};
+type OuiListboxStates<State extends OuiListboxState = OuiListboxState> = {
+  map: WeakMap<HTMLElement, State>;
+  set: Set<State>;
+};
+type OuiListboxType = 'autocomplete' | 'select';
+type OuiListboxValues = {
+  current: string[];
+  initial: string[];
+  label: HTMLElement;
+};
+//#endregion
+export { OuiListboxGroup as a, OuiListboxPreview as c, OuiListboxType as d, OuiListboxCallbacks as i, OuiListboxState as l, OuiListboxAutoComplete as n, OuiListboxLocalizations as o, OuiListboxAutoCompleteType as r, OuiListboxOptions as s, OuiListboxAttributes as t, OuiListboxStates as u };