@oscarpalmer/oui 0.35.0 → 0.36.0

package/src/js/listbox/constants.listbox.ts

@@ -0,0 +1,61 @@
+import type {OuiListboxAttributes} from '../internal/listbox/listbox.model';
+
+// #region Variables
+
+export 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}]`;
+
+export const LISTBOX_ATTRIBUTES: OuiListboxAttributes = {
+	active: attributeOptionActive,
+	content: attributeContent,
+	empty: attributeListEmpty,
+	filter: attributeFilter,
+	group: attributeGroup,
+	header: attributeHeader,
+	hidden: attributeHidden,
+	input: attributeFilterInput,
+	list: attributeList,
+	message: attributeMessage,
+	option: attributeOption,
+};
+
+export const LISTBOX_MESSAGES = {
+	label: messageLabel,
+	select: messageSelect,
+};
+
+export const LISTBOX_SELECTORS = {
+	filter: selectorFilter,
+	option: selectorOption,
+};
+
+// #endregion

package/src/js/listbox/event.listbox.ts

@@ -0,0 +1,106 @@
+import {on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {
+	applyListboxSelection,
+	filterListbox,
+	toggleListboxOption,
+} from '../internal/listbox/listbox.data';
+import {updateListboxPreview} from '../internal/listbox/listbox.dom';
+import {processListboxKeydown} from '../internal/listbox/listbox.event';
+import type {OuiListboxPreview, OuiListboxState} from '../internal/listbox/listbox.model';
+import {LISTBOX_SELECTORS, LISTBOX_TAGNAME} from './constants.listbox';
+import {listboxStates} from './state.listbox';
+
+// #region Types
+
+// #region Functions
+
+function onListboxClick(event: Event): void {
+	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) as HTMLElement | null;
+
+	if (option == null) {
+		return;
+	}
+
+	if (state.disabled) {
+		state.filter.element.focus();
+	} else if (state.readonly) {
+		updateListboxPreview('none', state, option, false);
+	} else {
+		toggleListboxOption(state, option);
+	}
+}
+
+export function onListboxEnter(state: OuiListboxState): void {
+	if (!state.disabled && !state.readonly) {
+		toggleListboxOption(state, state.active);
+	}
+}
+
+export function onListboxFilter(
+	preview: OuiListboxPreview,
+	state: OuiListboxState,
+	_: boolean,
+	active?: HTMLElement,
+): void {
+	updateListboxPreview(preview, state, active);
+}
+
+function onListboxInput(event: InputEvent): void {
+	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: KeyboardEvent): void {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listboxStates.map.get(listbox!);
+
+	if (state?.filter.element === event.target) {
+		processListboxKeydown(event, state);
+	}
+}
+
+export function onListboxNavigation(
+	preview: OuiListboxPreview,
+	state: OuiListboxState,
+	active?: HTMLElement,
+): void {
+	if (state.multiple || state.readonly) {
+		updateListboxPreview(preview, state, active);
+	} else {
+		applyListboxSelection({
+			state,
+			option: active,
+			added: true,
+			selected: active == null ? [] : [active],
+		});
+	}
+}
+
+export function onListboxToggle(state: OuiListboxState): void {
+	state.filter.element.focus();
+}
+
+// #endregion
+
+// #region Initialization
+
+on(document, 'click', onListboxClick);
+on(document, 'input', onListboxInput);
+
+on(document, 'keydown', onListboxKeydown, {
+	passive: false,
+});
+
+// #endregion

package/src/js/listbox/index.ts

@@ -0,0 +1,302 @@
+import {parse} from '@oscarpalmer/atoms/string';
+import {getAttribute} from '@oscarpalmer/toretto/attribute';
+import {setListboxValue, setListboxValues} from '../internal/listbox/listbox.data';
+import {
+	setListboxDisabled,
+	setListboxFilter,
+	setListboxLimit,
+	setListboxReadonly,
+	setListboxRequired,
+} from '../internal/listbox/listbox.misc';
+import type {OuiListboxLocalizations, OuiListboxState} from '../internal/listbox/listbox.model';
+import {attachListbox, detachListbox} from '../internal/listbox/listbox.state';
+import {LISTBOX_TAGNAME} from './constants.listbox';
+import {updateListboxLocalizations} from './misc.listbox';
+import {createListboxState, listboxStates, onAttachListbox, onDetachListbox} from './state.listbox';
+
+// #region Types
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[LISTBOX_TAGNAME]: OuiListboxElement;
+	}
+}
+
+export class OuiListboxElement extends HTMLElement {
+	static formAssociated = true;
+
+	static observedAttributes = ['max', 'min', 'required', 'value'];
+
+	readonly #internals: ElementInternals;
+
+	#restored?: string[];
+
+	#state!: OuiListboxState;
+
+	/**
+	 * Is the listbox disabled?
+	 */
+	get disabled(): boolean {
+		return this.#state?.disabled ?? false;
+	}
+
+	/**
+	 * Should the listbox be disabled?
+	 */
+	set disabled(value: boolean) {
+		if (typeof value === 'boolean' && value !== this.disabled) {
+			setListboxDisabled(this.#state, value);
+		}
+	}
+
+	/**
+	 * Current filter value
+	 */
+	get filter(): string {
+		return this.#state.filter.element.value;
+	}
+
+	/**
+	 * Set the filter value
+	 */
+	set filter(value: string) {
+		setListboxFilter(this.#state, value);
+	}
+
+	/**
+	 * Maximum number of selected options
+	 */
+	get max(): number | undefined {
+		return this.#state?.max;
+	}
+
+	/**
+	 * Set the maximum number of selected options
+	 */
+	set max(value: number) {
+		setListboxLimit('max', this.#state, value);
+	}
+
+	/**
+	 * Minimum number of selected options
+	 */
+	get min(): number | undefined {
+		return this.#state?.min;
+	}
+
+	/**
+	 * Set the minimum number of selected options
+	 */
+	set min(value: number) {
+		setListboxLimit('min', this.#state, value);
+	}
+
+	/**
+	 * Does the listbox allow multiple values?
+	 */
+	get multiple(): boolean {
+		return this.hasAttribute('multiple');
+	}
+
+	/**
+	 * Name of the listbox
+	 */
+	get name(): string {
+		return getAttribute(this, 'name') ?? '';
+	}
+
+	/**
+	 * Is the listbox readonly?
+	 */
+	get readonly(): boolean {
+		return this.#state?.readonly ?? false;
+	}
+
+	/**
+	 * Should the listbox be readonly?
+	 */
+	set readonly(value: boolean) {
+		if (typeof value === 'boolean' && value !== this.readonly) {
+			setListboxReadonly(this.#state, value);
+		}
+	}
+
+	/**
+	 * Is the listbox required?
+	 */
+	get required(): boolean {
+		return this.#state?.required ?? false;
+	}
+
+	/**
+	 * Should the listbox be required?
+	 */
+	set required(value: boolean) {
+		if (typeof value === 'boolean' && value !== this.required) {
+			setListboxRequired(this.#state, value);
+		}
+	}
+
+	/**
+	 * Selected options
+	 */
+	get selected(): HTMLElement[] {
+		return this.#state.options.selected.slice();
+	}
+
+	/**
+	 * Current value
+	 */
+	get value(): string {
+		return this.#state.values.current[0];
+	}
+
+	/**
+	 * Set the value
+	 */
+	set value(value: unknown) {
+		setListboxValue(this.#state, value);
+	}
+
+	/**
+	 * Current values
+	 */
+	get values(): string[] {
+		return this.#state.values.current.slice();
+	}
+
+	/**
+	 * Set the values
+	 */
+	set values(values: unknown[]) {
+		setListboxValues(this.#state, values);
+	}
+
+	constructor() {
+		super();
+
+		this.#internals = this.attachInternals();
+	}
+
+	attributeChangedCallback(name: string, _: string | null, value: string | null): void {
+		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 ?? '';
+				break;
+
+			default:
+				break;
+		}
+	}
+
+	/**
+	 * Clear all selected options
+	 */
+	clear(): void {
+		setListboxValues(this.#state, []);
+	}
+
+	connectedCallback(): void {
+		if (this.#state == null) {
+			this.#initialize();
+		} else {
+			attachListbox(this.#state, listboxStates, onAttachListbox);
+		}
+	}
+
+	disconnectedCallback(): void {
+		if (this.#state != null) {
+			detachListbox(this.#state, listboxStates, onDetachListbox);
+		}
+	}
+
+	formDisabledCallback(disabled: boolean): void {
+		this.disabled = disabled;
+	}
+
+	formResetCallback(): void {
+		setListboxValues(this.#state, this.#state.values.initial);
+	}
+
+	formStateRestoreCallback(state: string | File | FormData, reason: unknown): void {
+		if (reason !== 'restore') {
+			return;
+		}
+
+		const parsed = typeof state === 'string' ? parse(state) : undefined;
+
+		if (!Array.isArray(parsed)) {
+			return;
+		}
+
+		if (this.#state == null) {
+			this.#restored = parsed;
+		} else {
+			setListboxValues(this.#state, parsed);
+		}
+	}
+
+	/**
+	 * 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;
+
+	setLocalizations(
+		first: string | Record<string, Partial<OuiListboxLocalizations>>,
+		second?: Partial<OuiListboxLocalizations>,
+	): void {
+		updateListboxLocalizations(
+			this.#state.localizations.global,
+			this.#state.localizations.component,
+			first,
+			second,
+		);
+	}
+
+	#initialize(): void {
+		this.#state = createListboxState(this, this.#internals);
+
+		if (this.#restored != null) {
+			setListboxValues(this.#state, this.#restored);
+
+			this.#restored = undefined;
+		}
+	}
+}
+
+// #endregion
+
+// #region Initialization
+
+customElements.define(LISTBOX_TAGNAME, OuiListboxElement);
+
+// #endregion
+
+// #region Exports
+
+export {setListboxLocalizations} from './misc.listbox';
+
+// #endregion

package/src/js/listbox/misc.listbox.ts

@@ -0,0 +1,70 @@
+import {updateListboxMessage, updateListboxValueLabel} from '../internal/listbox/listbox.dom';
+import type {OuiListboxLocalizations} from '../internal/listbox/listbox.model';
+import {OuiLocalizations, updateLocalizations} from '../l10n';
+import {listboxLocalizations, listboxStates} from './state.listbox';
+
+// #region Functions
+
+export function getListboxId(): string {
+	index += 1;
+
+	return `oui_listbox_${index}`;
+}
+
+/**
+ * Set listbox localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+export function setListboxLocalizations(
+	language: string,
+	localizations: Partial<OuiListboxLocalizations>,
+): void;
+
+/**
+ * Set listbox localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+export function setListboxLocalizations(
+	localizations: Record<string, Partial<OuiListboxLocalizations>>,
+): void;
+
+export function setListboxLocalizations(
+	first: string | Record<string, Partial<OuiListboxLocalizations>>,
+	second?: Partial<OuiListboxLocalizations>,
+): void {
+	updateListboxLocalizations(listboxLocalizations, listboxLocalizations.values, first, second);
+}
+
+export function updateListboxLocalizations(
+	instance: OuiLocalizations<OuiListboxLocalizations>,
+	destination: Record<string, Partial<OuiListboxLocalizations>>,
+	first: string | Record<string, Partial<OuiListboxLocalizations>>,
+	second?: Partial<OuiListboxLocalizations>,
+): void {
+	updateLocalizations(
+		instance,
+		typeof first === 'string'
+			? {
+					[first]: second!,
+				}
+			: first,
+		destination,
+		() => {
+			for (const state of listboxStates.set) {
+				updateListboxMessage(state);
+				updateListboxValueLabel(state);
+			}
+		},
+	);
+}
+
+// #endregion
+
+// #region Variables
+
+let index = 0;
+
+// #endregion