@oscarpalmer/oui 0.38.0 → 0.40.0

package/src/js/listbox/index.ts

@@ -1,364 +0,0 @@
-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);
-	}
-
-	/**
-	 * Form element associated with the listbox
-	 */
-	get form(): HTMLFormElement | null {
-		return this.#internals.form;
-	}
-
-	/**
-	 * Label elements associated with the listbox
-	 */
-	get labels(): NodeList {
-		return this.#internals.labels;
-	}
-
-	/**
-	 * 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();
-	}
-
-	/**
-	 * Validation message for the listbox
-	 */
-	get validationMessage(): string {
-		return this.#internals.validationMessage;
-	}
-
-	/**
-	 * Validity state for the listbox
-	 */
-	get validity(): ValidityState {
-		return this.#internals.validity;
-	}
-
-	/**
-	 * 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);
-	}
-
-	/**
-	 * Can the listbox be validated?
-	 */
-	get willValidate(): boolean {
-		return this.#internals.willValidate;
-	}
-
-	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;
-		}
-	}
-
-	/**
-	 * Check if the listbox is valid
-	 *
-	 * @returns `true` if the listbox is valid, otherwise `false`
-	 */
-	checkValidity(): boolean {
-		return this.#internals.checkValidity();
-	}
-
-	/**
-	 * 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);
-		}
-	}
-
-	/**
-	 * Check if the listbox is valid and report any validation errors
-	 *
-	 * @returns `true` if the listbox is valid, otherwise `false`
-	 */
-	reportValidity(): boolean {
-		return this.#internals.reportValidity();
-	}
-
-	/**
-	 * Set a custom validation message for the listbox
-	 *
-	 * @param message Validation message
-	 */
-	setCustomValidity(message: string): void {
-		this.#internals.setValidity({customError: message !== ''}, message, this);
-	}
-
-	/**
-	 * 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

@@ -1,70 +0,0 @@
-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

package/src/js/listbox/state.listbox.ts

@@ -1,194 +0,0 @@
-import {noop} from '@oscarpalmer/atoms/function';
-import {setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
-import {getData} from '@oscarpalmer/toretto/data';
-import {createListboxContent} from '../internal/listbox/listbox.dom';
-import {generateListboxIds} from '../internal/listbox/listbox.misc';
-import type {
-	OuiListboxAutoCompleteType,
-	OuiListboxCallbacks,
-	OuiListboxLocalizations,
-	OuiListboxState,
-	OuiListboxStates,
-} from '../internal/listbox/listbox.model';
-import {initializeListboxState} from '../internal/listbox/listbox.state';
-import {getBooleanAriaValue} from '../internal/misc';
-import {getLocalizations} from '../l10n';
-import {LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES} from './constants.listbox';
-import {
-	onListboxEnter,
-	onListboxFilter,
-	onListboxNavigation,
-	onListboxToggle,
-} from './event.listbox';
-import type {OuiListboxElement} from './index';
-import {getListboxId} from './misc.listbox';
-
-// #region Functions
-
-export function createListboxState(
-	element: OuiListboxElement,
-	internals: ElementInternals,
-): OuiListboxState {
-	const select = element.querySelector('select');
-
-	if (select == null) {
-		throw new Error(LISTBOX_MESSAGES.select);
-	}
-
-	const label = element.querySelector(`label[for="${select.id}"]`) as HTMLLabelElement;
-
-	if (label == null) {
-		throw new Error(LISTBOX_MESSAGES.label);
-	}
-
-	element.id = select.id;
-
-	const disabled = getBooleanAriaValue(element, 'disabled') || select.disabled;
-	const multiple = element.multiple || select.multiple;
-	const readonly = getBooleanAriaValue(element, 'readonly');
-	const required = getBooleanAriaValue(element, 'required') || select.required;
-
-	setAttributes(element, {
-		autocomplete: 'none',
-		name: select.name === '' ? select.id : select.name,
-	});
-
-	const id = getListboxId();
-
-	const labelId = label.id;
-
-	label.htmlFor = id;
-	label.id = `${id}_label`;
-
-	generateListboxIds(id, select);
-
-	const type = 'select';
-
-	const content = createListboxContent({
-		element,
-		id,
-		label,
-		multiple,
-		select,
-		type,
-		attributes: LISTBOX_ATTRIBUTES,
-		autocomplete: listboxAutoComplete,
-		listbox: true,
-	});
-
-	const {selected} = content.list.options;
-
-	const values =
-		selected.length === 0 ? [''] : selected.map(option => getData(option, 'value', false) ?? '');
-
-	const state: OuiListboxState = {
-		disabled,
-		id,
-		internals,
-		message: content.message,
-		multiple,
-		readonly,
-		required,
-		select,
-		type,
-		active: selected[0],
-		attributes: LISTBOX_ATTRIBUTES,
-		autocomplete: listboxAutoComplete,
-		callbacks: listboxCallbacks,
-		content: content.element,
-		elements: [element, content.filter!.element],
-		filter: {
-			element: content.filter!.element,
-			value: '',
-		},
-		host: element,
-		label: {
-			id: labelId,
-			element: label,
-		},
-		list: content.list.element,
-		listeners: [],
-		listbox: true,
-		localizations: {
-			component: {},
-			global: listboxLocalizations,
-		},
-		name: element.name,
-		options: content.list.options,
-		values: {
-			current: values.slice(),
-			initial: values.slice(),
-			label: content.value,
-		},
-	};
-
-	return initializeListboxState(state, listboxStates, onAttachListbox);
-}
-
-// #endregion
-
-// #region Functions
-
-export function onAttachListbox(state: OuiListboxState): void {
-	const {content, select} = state;
-
-	select.hidden = true;
-
-	select.insertAdjacentElement('afterend', content);
-
-	select.remove();
-}
-
-export function onDetachListbox(state: OuiListboxState): void {
-	const {content, select} = state;
-
-	content.insertAdjacentElement('beforebegin', select);
-
-	content.remove();
-
-	select.hidden = false;
-}
-
-// #endregion
-
-// #region Variables
-
-const listboxAutoComplete: Record<OuiListboxAutoCompleteType, boolean> = {
-	both: false,
-	inline: false,
-	list: false,
-	none: true,
-};
-
-const listboxCallbacks: OuiListboxCallbacks = {
-	data: {
-		onApply: noop,
-		onFilter: onListboxFilter,
-		onForm: noop,
-		onPreview: noop,
-		onToggle: onListboxToggle,
-	},
-	keydown: {
-		onEnter: onListboxEnter,
-		onNavigation: onListboxNavigation,
-		onToggle: onListboxToggle,
-	},
-};
-
-export const listboxLocalizations = getLocalizations<OuiListboxLocalizations>({
-	empty: 'No results found',
-	input: '',
-	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: '',
-	results: amount => `${amount} results available`,
-	selected: amount => `${amount} selected`,
-});
-
-export const listboxStates: OuiListboxStates = {
-	map: new WeakMap(),
-	set: new Set(),
-};
-
-// #endregion