@oscarpalmer/oui 0.34.0 → 0.36.0

package/dist/js/internal/listbox/listbox.event.mjs

@@ -0,0 +1,63 @@
+import { LISTBOX_KEYS } from "./listbox.constants.mjs";
+import { S as getListboxVisibleOptions } from "../../listbox.data-BWd0PCy7.mjs";
+import { clamp } from "@oscarpalmer/atoms/number";
+//#region src/js/internal/listbox/listbox.event.ts
+function processListboxKeydown(event, state) {
+	const ignore = state.disabled || state.readonly;
+	const isSelect = state.type === "select";
+	let preventDefault = ignore;
+	switch (true) {
+		case event.key === " ":
+			if (!state.disabled) state.callbacks.keydown.onActivation?.(state);
+			break;
+		case event.key === "Enter":
+			preventDefault = state.callbacks.keydown.preventActivation?.(state) ?? true;
+			if (preventDefault) state.callbacks.keydown.onEnter?.(state);
+			else if (!ignore && state.type === "select") state.callbacks.keydown.onActivation?.(state);
+			else if (!ignore) state.internals.form?.requestSubmit();
+			break;
+		case event.key === "Escape":
+			preventDefault = false;
+			state.callbacks.keydown.onEscape?.(state);
+			break;
+		case !isSelect && LISTBOX_KEYS.selection.has(event.key):
+			if (!ignore) state.callbacks.keydown.onSelection?.(state);
+			break;
+		case LISTBOX_KEYS.navigation.has(event.key):
+			if (!state.disabled) onNavigation(event, state);
+			break;
+		default:
+			preventDefault = false;
+			if (event.key === "Tab") state.callbacks.keydown.onTab?.(state);
+	}
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+function onNavigation(event, state) {
+	const skip = state.callbacks.keydown.skipNavigation?.(state) ?? false;
+	const visible = getListboxVisibleOptions(state);
+	if (visible.length === 0) return;
+	let next;
+	if (skip || state.active == null) next = state.active ?? visible.at(event.key === "ArrowDown" ? 0 : -1);
+	else {
+		const current = visible.findIndex((option) => option.id === state.active?.id);
+		let index;
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				index = clamp(current + (event.key === "ArrowDown" ? 1 : -1), 0, visible.length - 1, true);
+				break;
+			case "PageDown":
+			case "PageUp": index = clamp(current + (event.key === "PageDown" ? 10 : -10), 0, visible.length - 1);
+		}
+		if (index != null) next = visible[index];
+	}
+	let preview;
+	if (state.type === "autocomplete" && (state.autocomplete.both || state.autocomplete.inline)) preview = "set";
+	else preview = "none";
+	state.callbacks.keydown.onNavigation(preview, state, next ?? state.active ?? visible[0]);
+}
+//#endregion
+export { processListboxKeydown };

package/dist/js/internal/listbox/listbox.form.d.mts

@@ -0,0 +1,6 @@
+import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.form.d.ts
+declare function updateListboxForm<State extends OuiListboxState>(state: State, values: string[], emit?: boolean): void;
+declare function updateListboxValidity(state: OuiListboxState): void;
+//#endregion
+export { updateListboxForm, updateListboxValidity };

package/dist/js/internal/listbox/listbox.form.mjs

@@ -0,0 +1,52 @@
+import { getLocalization, localize } from "../../l10n.mjs";
+import { dispatch } from "@oscarpalmer/toretto/event";
+//#region src/js/internal/listbox/listbox.form.ts
+function updateListboxForm(state, values, emit) {
+	let value;
+	if (state.multiple) {
+		const { length } = values;
+		value = new FormData();
+		for (let index = 0; index < length; index += 1) value.append(state.name, values[index]);
+	} else value = values[0];
+	state.values.current = values;
+	state.internals.setFormValue(value, JSON.stringify(values));
+	state.callbacks.data.onForm(state);
+	updateListboxValidity(state);
+	if (emit ?? true) dispatch(state.host, "change");
+}
+function updateListboxValidity(state) {
+	if (state.autocomplete.none && !state.listbox) {
+		const valueMissing = state.required && state.filter.element.value.length === 0;
+		const localization = getLocalization(state.localizations.global, state.host, "invalid", state.localizations.component);
+		state.internals.setValidity({ valueMissing }, localize(localization, {}, []));
+		state.internals.checkValidity();
+		return;
+	}
+	let data = {};
+	let error;
+	let key;
+	let parameters = [];
+	switch (true) {
+		case state.required && state.options.selected.length === 0:
+			error = "badInput";
+			key = "input";
+			break;
+		case state.multiple && typeof state.max === "number" && state.options.selected.length > state.max:
+			data = { amount: state.max };
+			error = "rangeOverflow";
+			key = "max";
+			parameters = [state.max];
+			break;
+		case state.multiple && typeof state.min === "number" && state.options.selected.length < state.min:
+			data = { amount: state.min };
+			error = "rangeUnderflow";
+			key = "min";
+			parameters = [state.min];
+	}
+	const localization = key == null ? void 0 : getLocalization(state.localizations.global, state.host, key, state.localizations.component);
+	const message = localization == null ? void 0 : localize(localization, data, parameters);
+	state.internals.setValidity(error == null ? {} : { [error]: true }, message);
+	state.internals.checkValidity();
+}
+//#endregion
+export { updateListboxForm, updateListboxValidity };

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

@@ -0,0 +1,12 @@
+import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.misc.d.ts
+declare function generateListboxIds(prefix: string, select: HTMLSelectElement): void;
+declare function getListboxVisibleOptions(state: OuiListboxState): HTMLElement[];
+declare function setListboxDisabled<State extends OuiListboxState>(state: State, value: boolean): void;
+declare function setListboxFilter<State extends OuiListboxState>(state: State, value: unknown): void;
+declare function setListboxLimit<State extends OuiListboxState>(type: 'max' | 'min', state: State, value?: unknown): void;
+declare function setListboxMultiple(element: HTMLElement, value: boolean): void;
+declare function setListboxReadonly<State extends OuiListboxState>(state: State, value: boolean): void;
+declare function setListboxRequired<State extends OuiListboxState>(state: State, value: boolean): void;
+//#endregion
+export { generateListboxIds, getListboxVisibleOptions, setListboxDisabled, setListboxFilter, setListboxLimit, setListboxMultiple, setListboxReadonly, setListboxRequired };

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

@@ -0,0 +1,2 @@
+import { C as setListboxDisabled, D as setListboxReadonly, E as setListboxMultiple, O as setListboxRequired, S as getListboxVisibleOptions, T as setListboxLimit, w as setListboxFilter, x as generateListboxIds } from "../../listbox.data-BWd0PCy7.mjs";
+export { generateListboxIds, getListboxVisibleOptions, setListboxDisabled, setListboxFilter, setListboxLimit, setListboxMultiple, setListboxReadonly, setListboxRequired };

package/dist/js/internal/listbox/listbox.model.d.mts

@@ -0,0 +1,2 @@
+import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxType, i as OuiListboxCallbacks, l as OuiListboxState, n as OuiListboxAutoComplete, o as OuiListboxLocalizations, r as OuiListboxAutoCompleteType, s as OuiListboxOptions, t as OuiListboxAttributes, u as OuiListboxStates } from "../../listbox.model-CRReGOmu.mjs";
+export { OuiListboxAttributes, OuiListboxAutoComplete, OuiListboxAutoCompleteType, OuiListboxCallbacks, OuiListboxGroup, OuiListboxLocalizations, OuiListboxOptions, OuiListboxPreview, OuiListboxState, OuiListboxStates, OuiListboxType };

package/dist/js/internal/listbox/listbox.model.mjs

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,7 @@
+import { l as OuiListboxState, u as OuiListboxStates } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.state.d.ts
+declare function attachListbox<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onAttach: (state: State) => void): void;
+declare function detachListbox<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onDetach: (state: State) => void): void;
+declare function initializeListboxState<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onAttach: (state: State) => void): State;
+//#endregion
+export { attachListbox, detachListbox, initializeListboxState };

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

@@ -0,0 +1,40 @@
+import { updateListboxForm } from "./listbox.form.mjs";
+import { C as setListboxDisabled, D as setListboxReadonly, E as setListboxMultiple, O as setListboxRequired, T as setListboxLimit, b as updateListboxValueLabel, i as filterListboxOptions, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-BWd0PCy7.mjs";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+//#region src/js/internal/listbox/listbox.state.ts
+function attachListbox(state, states, onAttach) {
+	const { filter, host, label } = state;
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${state.id}_label`;
+	onAttach(state);
+	states.map.set(host, state);
+	states.set.add(state);
+}
+function detachListbox(state, states, onDetach) {
+	const { host, label, select } = state;
+	const listeners = state.listeners.splice(0);
+	const { length } = listeners;
+	for (let index = 0; index < length; index += 1) listeners[index]();
+	label.element.htmlFor = select.id;
+	label.element.id = label.id;
+	onDetach(state);
+	states.map.delete(host);
+	states.set.delete(state);
+}
+function initializeListboxState(state, states, onAttach) {
+	attachListbox(state, states, onAttach);
+	setListboxDisabled(state, state.disabled);
+	setListboxLimit("max", state, getAttribute(state.host, "max"));
+	setListboxLimit("min", state, getAttribute(state.host, "min"));
+	setListboxMultiple(state.host, state.multiple);
+	setListboxReadonly(state, state.readonly);
+	setListboxRequired(state, state.required);
+	filterListboxOptions(state);
+	updateListboxForm(state, state.values.current, false);
+	updateListboxMessage(state);
+	updateListboxValueLabel(state);
+	if (state.options.selected.length > 0) updateListboxPreview("none", state, state.options.selected[0]);
+	return state;
+}
+//#endregion
+export { attachListbox, detachListbox, initializeListboxState };

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

@@ -0,0 +1,6 @@
+import { AnyAriaBooleanAttribute } from "@oscarpalmer/toretto/models";
+//#region src/js/internal/misc.d.ts
+declare function getAttributeValue<Value>(element: HTMLElement, attribute: string, possible: Set<Value>, defaultValue: Value): Value;
+declare function getBooleanAriaValue(element: HTMLElement, attribute: AnyAriaBooleanAttribute): boolean;
+//#endregion
+export { getAttributeValue, getBooleanAriaValue };

package/dist/js/internal/misc.mjs

@@ -0,0 +1,13 @@
+import { getAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+//#region src/js/internal/misc.ts
+function getAttributeValue(element, attribute, possible, defaultValue) {
+	const value = getAttribute(element, attribute);
+	return possible.has(value) ? value : defaultValue;
+}
+function getBooleanAriaValue(element, attribute) {
+	const value = getAria(element, attribute);
+	return value === true || value === "true";
+}
+//#endregion
+export { getAttributeValue, getBooleanAriaValue };

package/dist/js/l10n-Bn-7RcwR.d.mts

@@ -0,0 +1,20 @@
+import { GenericCallback } from "@oscarpalmer/atoms/models";
+//#region src/js/l10n.d.ts
+type LocalizationParameters<Localization> = Localization extends GenericCallback ? Parameters<Localization> : never;
+declare class OuiLocalizations<Localizations extends OuiLocalizationsValues> {
+  readonly defaults: Localizations;
+  readonly keys: Set<keyof Localizations>;
+  readonly values: Record<string, Partial<Localizations>>;
+  constructor(defaults: Localizations);
+  get<Key extends keyof Localizations>(element: Element, key: Key, localizations: Record<string, Partial<Localizations>>): string | GenericCallback;
+  set(language: string, localizations: Partial<Localizations>): void;
+  set(localizations: Record<string, Partial<Localizations>>): void;
+}
+type OuiLocalizationsValues = Record<string, string | GenericCallback>;
+declare function getLanguage(element: Element): string;
+declare function getLocalization<Localizations extends OuiLocalizationsValues, Key extends keyof Localizations>(localizations: OuiLocalizations<Localizations>, element: Element, key: Key, value: Record<string, Partial<Localizations>>): Localizations[Key] | GenericCallback;
+declare function getLocalizations<Localizations extends OuiLocalizationsValues>(defaults: Localizations): OuiLocalizations<Localizations>;
+declare function localize<Localizations extends OuiLocalizationsValues, Key extends keyof Localizations, Localization extends Localizations[Key]>(localization: Localization, data: Record<string, unknown>, parameters: LocalizationParameters<Localization>): string;
+declare function updateLocalizations<Localizations extends OuiLocalizationsValues>(instance: OuiLocalizations<Localizations>, values: Record<string, Partial<Localizations>>, destination: Record<string, Partial<Localizations>>, onAfter?: () => void): void;
+//#endregion
+export { getLocalizations as a, getLocalization as i, OuiLocalizationsValues as n, localize as o, getLanguage as r, updateLocalizations as s, OuiLocalizations as t };

package/dist/js/l10n.d.mts

@@ -0,0 +1,2 @@
+import { a as getLocalizations, i as getLocalization, n as OuiLocalizationsValues, o as localize, r as getLanguage, s as updateLocalizations, t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
+export { OuiLocalizations, OuiLocalizationsValues, getLanguage, getLocalization, getLocalizations, localize, updateLocalizations };

package/dist/js/l10n.mjs

@@ -0,0 +1,80 @@
+import { getString } from "@oscarpalmer/atoms/string";
+//#region src/js/l10n.ts
+var OuiLocalizations = class {
+	defaults;
+	keys;
+	values = {};
+	constructor(defaults) {
+		this.defaults = defaults;
+		this.keys = new Set(Object.keys(defaults));
+	}
+	get(element, key, localizations) {
+		return getLocalization(this, element, key, localizations);
+	}
+	set(first, second) {
+		updateLocalizations(this, typeof first === "string" ? { [first]: second } : first, this.values);
+	}
+};
+function getLanguage(element) {
+	return (element.closest("[lang]")?.getAttribute("lang") ?? document.documentElement.lang).toLowerCase();
+}
+function getLocalization(localizations, element, key, value) {
+	const language = getLanguage(element);
+	const values = [value, localizations.values];
+	const { length } = values;
+	let localization;
+	let shortLanguage;
+	for (let index = 0; index < length; index += 1) {
+		const value = values[index];
+		localization = value?.[language]?.[key];
+		if (localization != null) break;
+		shortLanguage ??= language.split("-")[0];
+		if (shortLanguage === language) continue;
+		localization = value?.[shortLanguage]?.[key];
+		if (localization != null) break;
+	}
+	return localization ?? localizations.defaults[key];
+}
+function getLocalizations(defaults) {
+	return new OuiLocalizations(defaults);
+}
+function localize(localization, data, parameters) {
+	if (typeof localization === "function") return localization(...parameters);
+	const keys = Object.keys(data);
+	const { length } = keys;
+	let localized = localization;
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		const value = data[key];
+		localized = localized.replaceAll(`{${key}}`, getString(value));
+	}
+	return localized;
+}
+function updateLocalizations(instance, values, destination, onAfter) {
+	if (typeof values !== "object" || values == null) return;
+	const localizations = destination ?? instance.values;
+	const languages = Object.keys(values);
+	const languagesLength = languages.length;
+	let updated = false;
+	for (let languagesIndex = 0; languagesIndex < languagesLength; languagesIndex += 1) {
+		const language = languages[languagesIndex];
+		const languageValue = values[language];
+		if (typeof languageValue !== "object" || languageValue == null) continue;
+		const normalizedLanguage = language.toLowerCase();
+		localizations[normalizedLanguage] ??= {};
+		const keys = Object.keys(languageValue);
+		const keysLength = keys.length;
+		for (let keysIndex = 0; keysIndex < keysLength; keysIndex += 1) {
+			const key = keys[keysIndex];
+			const keyValue = languageValue[key];
+			const normalizedKey = key.toLowerCase();
+			if (instance.keys.has(normalizedKey) && (typeof keyValue === "string" || typeof keyValue === "function")) {
+				updated = true;
+				localizations[normalizedLanguage][normalizedKey] = keyValue;
+			}
+		}
+	}
+	if (updated && typeof onAfter === "function") onAfter();
+}
+//#endregion
+export { OuiLocalizations, getLanguage, getLocalization, getLocalizations, localize, updateLocalizations };

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

@@ -0,0 +1,2 @@
+import { i as LISTBOX_TAGNAME, n as LISTBOX_MESSAGES, r as LISTBOX_SELECTORS, t as LISTBOX_ATTRIBUTES } from "../constants.listbox-DRsXUxd3.mjs";
+export { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME };

package/dist/js/listbox/constants.listbox.mjs

@@ -0,0 +1,40 @@
+//#region src/js/listbox/constants.listbox.ts
+const LISTBOX_TAGNAME = "oui-listbox";
+const attributeContent = `${LISTBOX_TAGNAME}-content`;
+const attributeFilter = `${LISTBOX_TAGNAME}-filter`;
+const attributeFilterInput = `${attributeFilter}-input`;
+const attributeGroup = `${LISTBOX_TAGNAME}-group`;
+const attributeHeader = `${LISTBOX_TAGNAME}-header`;
+const attributeHidden = `${LISTBOX_TAGNAME}-hidden`;
+const attributeList = `${LISTBOX_TAGNAME}-list`;
+const attributeListEmpty = `${attributeList}-empty`;
+const attributeMessage = `${LISTBOX_TAGNAME}-message`;
+const attributeOption = `${LISTBOX_TAGNAME}-option`;
+const attributeOptionActive = `${LISTBOX_TAGNAME}-option-active`;
+const messageLabel = `<${LISTBOX_TAGNAME}> must contain a <label> element for the <select> element`;
+const messageSelect = `<${LISTBOX_TAGNAME}> must contain a valid <select> element`;
+const selectorFilter = `[${attributeFilterInput}]`;
+const selectorOption = `[${attributeOption}]`;
+const LISTBOX_ATTRIBUTES = {
+	active: attributeOptionActive,
+	content: attributeContent,
+	empty: attributeListEmpty,
+	filter: attributeFilter,
+	group: attributeGroup,
+	header: attributeHeader,
+	hidden: attributeHidden,
+	input: attributeFilterInput,
+	list: attributeList,
+	message: attributeMessage,
+	option: attributeOption
+};
+const LISTBOX_MESSAGES = {
+	label: messageLabel,
+	select: messageSelect
+};
+const LISTBOX_SELECTORS = {
+	filter: selectorFilter,
+	option: selectorOption
+};
+//#endregion
+export { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME };

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

@@ -0,0 +1,8 @@
+import { c as OuiListboxPreview, l as OuiListboxState } from "../listbox.model-CRReGOmu.mjs";
+//#region src/js/listbox/event.listbox.d.ts
+declare function onListboxEnter(state: OuiListboxState): void;
+declare function onListboxFilter(preview: OuiListboxPreview, state: OuiListboxState, _: boolean, active?: HTMLElement): void;
+declare function onListboxNavigation(preview: OuiListboxPreview, state: OuiListboxState, active?: HTMLElement): void;
+declare function onListboxToggle(state: OuiListboxState): void;
+//#endregion
+export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };

package/dist/js/listbox/event.listbox.mjs

@@ -0,0 +1,2 @@
+import { d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../misc.listbox-BI-XsTOf.mjs";
+export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };

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

@@ -0,0 +1,116 @@
+import { o as OuiListboxLocalizations } from "../listbox.model-CRReGOmu.mjs";
+import { i as LISTBOX_TAGNAME } from "../constants.listbox-DRsXUxd3.mjs";
+import { n as setListboxLocalizations } from "../misc.listbox-gnoJhrTr.mjs";
+//#region src/js/listbox/index.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [LISTBOX_TAGNAME]: OuiListboxElement;
+  }
+}
+declare class OuiListboxElement extends HTMLElement {
+  #private;
+  static formAssociated: boolean;
+  static observedAttributes: string[];
+  /**
+   * Is the listbox disabled?
+   */
+  get disabled(): boolean;
+  /**
+   * Should the listbox be disabled?
+   */
+  set disabled(value: boolean);
+  /**
+   * Current filter value
+   */
+  get filter(): string;
+  /**
+   * Set the filter value
+   */
+  set filter(value: string);
+  /**
+   * Maximum number of selected options
+   */
+  get max(): number | undefined;
+  /**
+   * Set the maximum number of selected options
+   */
+  set max(value: number);
+  /**
+   * Minimum number of selected options
+   */
+  get min(): number | undefined;
+  /**
+   * Set the minimum number of selected options
+   */
+  set min(value: number);
+  /**
+   * Does the listbox allow multiple values?
+   */
+  get multiple(): boolean;
+  /**
+   * Name of the listbox
+   */
+  get name(): string;
+  /**
+   * Is the listbox readonly?
+   */
+  get readonly(): boolean;
+  /**
+   * Should the listbox be readonly?
+   */
+  set readonly(value: boolean);
+  /**
+   * Is the listbox required?
+   */
+  get required(): boolean;
+  /**
+   * Should the listbox be required?
+   */
+  set required(value: boolean);
+  /**
+   * Selected options
+   */
+  get selected(): HTMLElement[];
+  /**
+   * Current value
+   */
+  get value(): string;
+  /**
+   * Set the value
+   */
+  set value(value: unknown);
+  /**
+   * Current values
+   */
+  get values(): string[];
+  /**
+   * Set the values
+   */
+  set values(values: unknown[]);
+  constructor();
+  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  /**
+   * Clear all selected options
+   */
+  clear(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  formDisabledCallback(disabled: boolean): void;
+  formResetCallback(): void;
+  formStateRestoreCallback(state: string | File | FormData, reason: unknown): void;
+  /**
+   * Set listbox localizations for a specific language
+   *
+   * @param language Language code
+   * @param localizations Localizations for language
+   */
+  setLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
+  /**
+   * Set listbox localizations for one or more languages
+   *
+   * @param localizations Localizations for one or more languages
+   */
+  setLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
+}
+//#endregion
+export { OuiListboxElement, setListboxLocalizations };