@oscarpalmer/oui 0.34.0 → 0.35.0

package/dist/js/l10n.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;
+type OuiLocalizationValues = Record<string, string | GenericCallback>;
+declare class OuiLocalizations<Localizations extends OuiLocalizationValues> {
+  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;
+}
+declare function getLanguage(element: Element): string;
+declare function getLocalization<Localizations extends OuiLocalizationValues, Key extends keyof Localizations>(localizations: OuiLocalizations<Localizations>, element: Element, key: Key, value: Record<string, Partial<Localizations>>): Localizations[Key] | GenericCallback;
+declare function getLocalizations<Localizations extends OuiLocalizationValues>(defaults: Localizations): OuiLocalizations<Localizations>;
+declare function localize<Localizations extends OuiLocalizationValues, Key extends keyof Localizations, Localization extends Localizations[Key]>(localization: Localization, data: Record<string, unknown>, parameters: LocalizationParameters<Localization>): string;
+declare function updateLocalizations<Localizations extends OuiLocalizationValues>(instance: OuiLocalizations<Localizations>, values: Record<string, Partial<Localizations>>, destination?: Record<string, Partial<Localizations>>, onAfter?: () => void): void;
+//#endregion
+export { OuiLocalizations, 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.34.0",
+	"version": "0.35.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",

package/src/js/combobox/dom.combobox.ts

@@ -18,7 +18,6 @@ import {
 	comboboxScrollOptions,
 } from './constants.combobox';
 import {updateComboboxValidity} from './form.combobox';
-import {getComboboxLocalization} from './i18n.combobox';
 import type {
 	OuiComboboxAutoComplete,
 	OuiComboboxAutoCompleteType,
@@ -29,6 +28,8 @@ import type {
 	OuiComboboxState,
 	OuiComboboxType,
 } from './models.combobox';
+import {getLocalization, localize} from '../l10n';
+import {comboboxLocalizations} from './state.combobox';
 
 // #region Types
 
@@ -471,17 +472,26 @@ export function createComboboxSelectionItem(
 	option: HTMLElement,
 	state?: OuiComboboxState,
 ): OuiComboboxSelectionItem {
+	const optionLabel = option.textContent;
+	const optionValue = getData(option, 'value', false) ?? '';
+
 	const element = createElement('li');
 
 	const localization =
-		state == null ? option.textContent : getComboboxLocalization('remove', state);
+		state == null
+			? option.textContent
+			: getLocalization(comboboxLocalizations, state.host, 'remove', state.localizations);
 
 	const button = createElement('button', {
 		aria: {
-			label:
-				typeof localization === 'function'
-					? localization(option.textContent ?? '', getData(option, 'value', false) ?? '')
-					: localization,
+			label: localize(
+				localization,
+				{
+					label: optionLabel,
+					value: optionValue,
+				},
+				[optionLabel, optionValue],
+			),
 		},
 		attribute: {
 			[COMBOBOX_ATTRIBUTE_SELECTION_ITEM]: '',
@@ -598,15 +608,16 @@ export function updateComboboxAnchor(state: OuiComboboxState): void {
 		return;
 	}
 
-	const localization = getComboboxLocalization('selected', state);
-
-	setAria(
-		state.anchor.element,
-		'label',
-		typeof localization === 'function'
-			? localization(state.options.selected.length)
-			: localization.replace('{amount}', state.options.selected.length.toString()),
+	const localization = getLocalization(
+		comboboxLocalizations,
+		state.host,
+		'selected',
+		state.localizations,
 	);
+
+	const {length} = state.options.selected;
+
+	setAria(state.anchor.element, 'label', localize(localization, {amount: length}, [length]));
 }
 
 export function updateComboboxAutocomplete(
@@ -648,16 +659,23 @@ export function updateComboboxMessage(state: OuiComboboxState, visible: number):
 	setAttribute(state.message, COMBOBOX_ATTRIBUTE_HIDDEN, visible > 0 ? '' : undefined);
 
 	if (visible === 0) {
-		const localization = getComboboxLocalization('empty', state);
+		const localization = getLocalization(
+			comboboxLocalizations,
+			state.host,
+			'empty',
+			state.localizations,
+		);
 
-		state.message.textContent = typeof localization === 'function' ? localization() : localization;
+		state.message.textContent = localize(localization, {}, []);
 	} else {
-		const localization = getComboboxLocalization('results', state);
+		const localization = getLocalization(
+			comboboxLocalizations,
+			state.host,
+			'results',
+			state.localizations,
+		);
 
-		state.message.textContent =
-			typeof localization === 'function'
-				? localization(visible)
-				: localization.replace('{amount}', visible.toString());
+		state.message.textContent = localize(localization, {amount: visible}, [visible]);
 	}
 
 	state.message.hidden = false;
@@ -701,7 +719,7 @@ export function updateComboboxSelection(
 
 	let options = active == null ? [] : [active];
 
-	if (selected != null) {
+	if (added && selected != null) {
 		options = selected;
 
 		const {length} = state.selection.items;
@@ -766,7 +784,12 @@ export function updateComboboxSelectionItems(state: OuiComboboxState): void {
 		return;
 	}
 
-	const localization = getComboboxLocalization('remove', state);
+	const localization = getLocalization(
+		comboboxLocalizations,
+		state.host,
+		'remove',
+		state.localizations,
+	);
 
 	const {length} = state.selection.items;
 
@@ -781,12 +804,20 @@ export function updateComboboxSelectionItems(state: OuiComboboxState): void {
 			continue;
 		}
 
+		const optionLabel = option.textContent;
+		const optionValue = getData(option, 'value', false) ?? '';
+
 		setAria(
 			item.button,
 			'label',
-			typeof localization === 'function'
-				? localization(option?.textContent ?? '', getData(option, 'value', false) ?? '')
-				: localization.replace('{label}', option?.textContent ?? ''),
+			localize(
+				localization,
+				{
+					label: optionLabel,
+					value: optionValue,
+				},
+				[optionLabel, optionValue],
+			),
 		);
 	}
 }

package/src/js/combobox/form.combobox.ts

@@ -1,7 +1,8 @@
 import {dispatch} from '@oscarpalmer/toretto/event';
+import {getLocalization, localize} from '../l10n';
 import {updateComboboxAnchor} from './dom.combobox';
-import {getComboboxLocalization} from './i18n.combobox';
 import type {OuiComboboxState} from './models.combobox';
+import {comboboxLocalizations} from './state.combobox';
 
 // #region Functions
 
@@ -40,28 +41,29 @@ export function updateComboboxValidity(state: OuiComboboxState): void {
 	if (state.autocomplete.none) {
 		const valueMissing = state.required && state.filter.element.value.length === 0;
 
-		const localization = getComboboxLocalization('invalid', state);
-
-		state.internals.setValidity(
-			{valueMissing},
-			typeof localization === 'function' ? localization() : localization,
+		const localization = getLocalization(
+			comboboxLocalizations,
+			state.host,
+			'invalid',
+			state.localizations,
 		);
 
+		state.internals.setValidity({valueMissing}, localize(localization, {}, []));
+
 		state.internals.checkValidity();
 
 		return;
 	}
 
+	let data: Record<string, unknown> = {};
 	let error: 'badInput' | 'rangeOverflow' | 'rangeUnderflow' | undefined;
-	let message: string | undefined;
+	let key: 'input' | 'max' | 'min' | undefined;
+	let parameters: unknown[] = [];
 
 	switch (true) {
 		case state.required && state.options.selected.length === 0: {
 			error = 'badInput';
-
-			const localization = getComboboxLocalization('input', state);
-
-			message = typeof localization === 'function' ? localization() : localization;
+			key = 'input';
 
 			break;
 		}
@@ -69,14 +71,10 @@ export function updateComboboxValidity(state: OuiComboboxState): void {
 		case state.multiple &&
 			typeof state.max === 'number' &&
 			state.options.selected.length > state.max: {
+			data = {amount: state.max};
 			error = 'rangeOverflow';
-
-			const localization = getComboboxLocalization('max', state);
-
-			message =
-				typeof localization === 'function'
-					? localization(state.max)
-					: localization.replace('{max}', state.max.toString());
+			key = 'max';
+			parameters = [state.max];
 
 			break;
 		}
@@ -84,14 +82,10 @@ export function updateComboboxValidity(state: OuiComboboxState): void {
 		case state.multiple &&
 			typeof state.min === 'number' &&
 			state.options.selected.length < state.min: {
+			data = {amount: state.min};
 			error = 'rangeUnderflow';
-
-			const localization = getComboboxLocalization('min', state);
-
-			message =
-				typeof localization === 'function'
-					? localization(state.min)
-					: localization.replace('{min}', state.min.toString());
+			key = 'min';
+			parameters = [state.min];
 
 			break;
 		}
@@ -100,6 +94,13 @@ export function updateComboboxValidity(state: OuiComboboxState): void {
 			break;
 	}
 
+	const localization =
+		key == null
+			? undefined
+			: getLocalization(comboboxLocalizations, state.host, key, state.localizations);
+
+	const message = localization == null ? undefined : localize(localization, data, parameters);
+
 	state.internals.setValidity(
 		error == null
 			? {}

package/src/js/combobox/index.ts

@@ -1,12 +1,17 @@
 import {parse} from '@oscarpalmer/atoms/string';
 import {getAttribute} from '@oscarpalmer/toretto/attribute';
+import {updateLocalizations} from '../l10n';
 import {COMBOBOX_TAGNAME} from './constants.combobox';
 import {setComboboxValue, setComboboxValues} from './data.combobox';
 import {setComboboxDisabled, setComboboxReadonly, setComboboxRequired} from './dom.combobox';
-import {updateComboboxLocalizations} from './i18n.combobox';
 import {setComboboxFilter, setComboboxLimit} from './misc.combobox';
 import type {OuiComboboxLocalizations, OuiComboboxState, OuiComboboxType} from './models.combobox';
-import {attachCombobox, createComboboxState, detachCombobox} from './state.combobox';
+import {
+	attachCombobox,
+	comboboxLocalizations,
+	createComboboxState,
+	detachCombobox,
+} from './state.combobox';
 
 // #region Types
 
@@ -269,7 +274,8 @@ export class OuiComboboxElement extends HTMLElement {
 		first: string | Record<string, Partial<OuiComboboxLocalizations>>,
 		second?: Partial<OuiComboboxLocalizations>,
 	): void {
-		updateComboboxLocalizations(
+		updateLocalizations(
+			comboboxLocalizations,
 			typeof first === 'string'
 				? {
 						[first]: second!,
@@ -302,6 +308,6 @@ customElements.define(COMBOBOX_TAGNAME, OuiComboboxElement);
 
 // #region Exports
 
-export {setComboboxLocalizations} from './i18n.combobox';
+export {setComboboxLocalizations} from './misc.combobox';
 
 // #endregion

package/src/js/combobox/misc.combobox.ts

@@ -2,14 +2,22 @@ import {getAria} from '@oscarpalmer/toretto/aria';
 import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import type {AnyAriaBooleanAttribute} from '@oscarpalmer/toretto/models';
 import type {OuiComboboxElement} from '.';
+import {updateLocalizations} from '../l10n';
 import {COMBOBOX_AUTOCOMPLETES} from './constants.combobox';
+import {
+	updateComboboxAnchor,
+	updateComboboxMessage,
+	updateComboboxSelectionItems,
+} from './dom.combobox';
 import {onComboboxFilter} from './event.combobox';
 import {updateComboboxValidity} from './form.combobox';
 import type {
 	OuiComboboxAutoComplete,
 	OuiComboboxAutoCompleteType,
+	OuiComboboxLocalizations,
 	OuiComboboxState,
 } from './models.combobox';
+import {comboboxLocalizations, comboboxStates} from './state.combobox';
 
 // #region Functions
 
@@ -129,6 +137,48 @@ export function setComboboxLimit(
 	}
 }
 
+/**
+ * Set combobox localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+export function setComboboxLocalizations(
+	language: string,
+	localizations: Partial<OuiComboboxLocalizations>,
+): void;
+
+/**
+ * Set combobox localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+export function setComboboxLocalizations(
+	localizations: Record<string, Partial<OuiComboboxLocalizations>>,
+): void;
+
+export function setComboboxLocalizations(
+	first: string | Record<string, Partial<OuiComboboxLocalizations>>,
+	second?: Partial<OuiComboboxLocalizations>,
+): void {
+	updateLocalizations(
+		comboboxLocalizations,
+		typeof first === 'string'
+			? {
+					[first]: second!,
+				}
+			: first,
+		comboboxLocalizations.values,
+		() => {
+			for (const state of comboboxStates.set) {
+				updateComboboxAnchor(state);
+				updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
+				updateComboboxSelectionItems(state);
+			}
+		},
+	);
+}
+
 // #endregion
 
 // #region Variables

package/src/js/combobox/state.combobox.ts

@@ -3,6 +3,7 @@ import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getData} from '@oscarpalmer/toretto/data';
 import {on} from '@oscarpalmer/toretto/event';
 import {createEmbeddedFloatable} from '../floatable/floatable.embedded';
+import {getLocalizations} from '../l10n';
 import {
 	COMBOBOX_MESSAGE_LABEL,
 	COMBOBOX_MESSAGE_SELECT,
@@ -31,7 +32,7 @@ import {
 	getComboboxVisibleOptions,
 	setComboboxLimit,
 } from './misc.combobox';
-import type {OuiComboboxState} from './models.combobox';
+import type {OuiComboboxLocalizations, OuiComboboxState} from './models.combobox';
 
 // #region Functions
 
@@ -227,6 +228,17 @@ export function detachCombobox(state: OuiComboboxState): void {
 
 // #region Variables
 
+export const comboboxLocalizations = getLocalizations<OuiComboboxLocalizations>({
+	empty: 'No results found',
+	input: 'Please enter a value',
+	invalid: 'Please select an option from the list',
+	max: max => `Please select fewer options (maximum is ${max})`,
+	min: min => `Please select more options (minimum is ${min})`,
+	remove: label => `Remove ${label}`,
+	results: amount => `${amount} results available`,
+	selected: amount => `${amount} selected`,
+});
+
 export const comboboxStates = {
 	map: new WeakMap<HTMLElement, OuiComboboxState>(),
 	set: new Set<OuiComboboxState>(),

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;
+
+type OuiLocalizationValues = Record<string, string | GenericCallback>;
+
+export class OuiLocalizations<Localizations extends OuiLocalizationValues> {
+	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,
+		);
+	}
+}
+
+// #endregion
+
+// #region Functions
+
+export function getLanguage(element: Element): string {
+	return (
+		element.closest('[lang]')?.getAttribute('lang') ?? document.documentElement.lang
+	).toLowerCase();
+}
+
+export function getLocalization<
+	Localizations extends OuiLocalizationValues,
+	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 OuiLocalizationValues>(
+	defaults: Localizations,
+): OuiLocalizations<Localizations> {
+	return new OuiLocalizations(defaults);
+}
+
+export function localize<
+	Localizations extends OuiLocalizationValues,
+	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 OuiLocalizationValues>(
+	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