@oscarpalmer/oui 0.34.0 → 0.36.0

package/src/js/l10n.ts

@@ -0,0 +1,192 @@
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
+import {getString} from '@oscarpalmer/atoms/string';
+
+// #region Types
+
+type LocalizationParameters<Localization> = Localization extends GenericCallback
+	? Parameters<Localization>
+	: never;
+
+export class OuiLocalizations<Localizations extends OuiLocalizationsValues> {
+	readonly defaults: Localizations;
+
+	readonly keys: Set<keyof Localizations>;
+
+	readonly values: Record<string, Partial<Localizations>> = {};
+
+	constructor(defaults: Localizations) {
+		this.defaults = defaults;
+		this.keys = new Set(Object.keys(defaults) as Array<keyof Localizations>);
+	}
+
+	get<Key extends keyof Localizations>(
+		element: Element,
+		key: Key,
+		localizations: Record<string, Partial<Localizations>>,
+	): string | GenericCallback {
+		return getLocalization(this, element, key, localizations);
+	}
+
+	set(language: string, localizations: Partial<Localizations>): void;
+
+	set(localizations: Record<string, Partial<Localizations>>): void;
+
+	set(
+		first: string | Record<string, Partial<Localizations>>,
+		second?: Partial<Localizations>,
+	): void {
+		updateLocalizations(
+			this,
+			typeof first === 'string'
+				? {
+						[first]: second!,
+					}
+				: first,
+			this.values,
+		);
+	}
+}
+
+export type OuiLocalizationsValues = Record<string, string | GenericCallback>;
+
+// #endregion
+
+// #region Functions
+
+export function getLanguage(element: Element): string {
+	return (
+		element.closest('[lang]')?.getAttribute('lang') ?? document.documentElement.lang
+	).toLowerCase();
+}
+
+export function getLocalization<
+	Localizations extends OuiLocalizationsValues,
+	Key extends keyof Localizations,
+>(
+	localizations: OuiLocalizations<Localizations>,
+	element: Element,
+	key: Key,
+	value: Record<string, Partial<Localizations>>,
+): Localizations[Key] | GenericCallback {
+	const language = getLanguage(element);
+
+	const values = [value, localizations.values];
+	const {length} = values;
+
+	let localization: Localizations[Key] | undefined;
+	let shortLanguage: string | undefined;
+
+	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];
+}
+
+export function getLocalizations<Localizations extends OuiLocalizationsValues>(
+	defaults: Localizations,
+): OuiLocalizations<Localizations> {
+	return new OuiLocalizations(defaults);
+}
+
+export function localize<
+	Localizations extends OuiLocalizationsValues,
+	Key extends keyof Localizations,
+	Localization extends Localizations[Key],
+>(
+	localization: Localization,
+	data: Record<string, unknown>,
+	parameters: LocalizationParameters<Localization>,
+): string {
+	if (typeof localization === 'function') {
+		return localization(...parameters);
+	}
+
+	const keys = Object.keys(data);
+	const {length} = keys;
+
+	let localized = localization as string;
+
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		const value = data[key];
+
+		localized = localized.replaceAll(`{${key}}`, getString(value));
+	}
+
+	return localized;
+}
+
+export function updateLocalizations<Localizations extends OuiLocalizationsValues>(
+	instance: OuiLocalizations<Localizations>,
+	values: Record<string, Partial<Localizations>>,
+	destination: Record<string, Partial<Localizations>>,
+	onAfter?: () => void,
+): void {
+	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() as keyof Localizations;
+
+			if (
+				instance.keys.has(normalizedKey) &&
+				(typeof keyValue === 'string' || typeof keyValue === 'function')
+			) {
+				updated = true;
+
+				localizations[normalizedLanguage][normalizedKey] = keyValue as never;
+			}
+		}
+	}
+
+	if (updated && typeof onAfter === 'function') {
+		onAfter();
+	}
+}
+
+// #endregion

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