@oscarpalmer/oui 0.38.0 → 0.40.0

package/src/js/combobox/index.ts

@@ -1,382 +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, OuiListboxType} from '../internal/listbox/listbox.model';
-import {attachListbox, detachListbox} from '../internal/listbox/listbox.state';
-import {updateLocalizations} from '../l10n';
-import {COMBOBOX_TAGNAME} from './constants.combobox';
-import type {OuiComboboxState} from './models.combobox';
-import {
-	comboboxStates,
-	createComboboxState,
-	onAttachCombobox,
-	onDetachCombobox,
-} from './state.combobox';
-
-// #region Types
-
-declare global {
-	interface HTMLElementTagNameMap {
-		[COMBOBOX_TAGNAME]: OuiComboboxElement;
-	}
-}
-
-export class OuiComboboxElement extends HTMLElement {
-	static formAssociated = true;
-
-	static observedAttributes = ['max', 'min', 'required', 'value'];
-
-	readonly #internals: ElementInternals;
-
-	#restored?: string[];
-
-	#state!: OuiComboboxState;
-
-	/**
-	 * Is the combobox disabled?
-	 */
-	get disabled(): boolean {
-		return this.#state?.disabled ?? false;
-	}
-
-	/**
-	 * Should the combobox 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 combobox
-	 */
-	get form(): HTMLFormElement | null {
-		return this.#internals.form;
-	}
-
-	/**
-	 * Label elements associated with the combobox
-	 */
-	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 combobox allow multiple values?
-	 */
-	get multiple(): boolean {
-		return this.hasAttribute('multiple');
-	}
-
-	/**
-	 * Name of the combobox
-	 */
-	get name(): string {
-		return getAttribute(this, 'name') ?? '';
-	}
-
-	/**
-	 * Is the combobox readonly?
-	 */
-	get readonly(): boolean {
-		return this.#state?.readonly ?? false;
-	}
-
-	/**
-	 * Should the combobox be readonly?
-	 */
-	set readonly(value: boolean) {
-		if (typeof value === 'boolean' && value !== this.readonly) {
-			setListboxReadonly(this.#state, value);
-		}
-	}
-
-	/**
-	 * Is the combobox required?
-	 */
-	get required(): boolean {
-		return this.#state?.required ?? false;
-	}
-
-	/**
-	 * Should the combobox 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();
-	}
-
-	/**
-	 * Type of combobox
-	 */
-	get type(): OuiListboxType {
-		return this.#state.type;
-	}
-
-	/**
-	 * Validation message for the combobox
-	 */
-	get validationMessage(): string {
-		return this.#internals.validationMessage;
-	}
-
-	/**
-	 * Validity state for the combobox
-	 */
-	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 combobox 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 combobox is valid
-	 *
-	 * @returns `true` if the combobox 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, comboboxStates, onAttachCombobox);
-		}
-	}
-
-	disconnectedCallback(): void {
-		if (this.#state != null) {
-			detachListbox(this.#state, comboboxStates, onDetachCombobox);
-		}
-	}
-
-	formDisabledCallback(disabled: boolean): void {
-		this.disabled = disabled;
-	}
-
-	formResetCallback(): void {
-		setListboxValues(this.#state, this.#state.values.initial);
-	}
-
-	formStateRestoreCallback(state: unknown, 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 combobox is valid and report any validation errors
-	 *
-	 * @returns `true` if the combobox is valid, otherwise `false`
-	 */
-	reportValidity(): boolean {
-		return this.#internals.reportValidity();
-	}
-
-	/**
-	 * Set a custom validation message for the combobox
-	 *
-	 * @param message Validation message
-	 */
-	setCustomValidity(message: string): void {
-		this.#internals.setValidity({customError: message !== ''}, message, this);
-	}
-
-	/**
-	 * Set combobox localizations for a specific language
-	 *
-	 * @param language Language code
-	 * @param localizations Localizations for language
-	 */
-	setLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
-
-	/**
-	 * Set combobox 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 {
-		updateLocalizations(
-			this.#state.localizations.global,
-			typeof first === 'string'
-				? {
-						[first]: second!,
-					}
-				: first,
-			this.#state.localizations.component,
-		);
-	}
-
-	#initialize(): void {
-		this.tabIndex = -1;
-
-		this.#state = createComboboxState(this, this.#internals);
-
-		if (this.#restored != null) {
-			setListboxValues(this.#state, this.#restored);
-
-			this.#restored = undefined;
-		}
-	}
-}
-
-// #endregion
-
-// #region Initialization
-
-customElements.define(COMBOBOX_TAGNAME, OuiComboboxElement);
-
-// #endregion
-
-// #region Exports
-
-export {setComboboxLocalizations} from './misc.combobox';
-
-// #endregion

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

@@ -1,104 +0,0 @@
-import {updateListboxMessage, updateListboxValueLabel} from '../internal/listbox/listbox.dom';
-import type {
-	OuiListboxAutoComplete,
-	OuiListboxAutoCompleteType,
-	OuiListboxLocalizations,
-} from '../internal/listbox/listbox.model';
-import {getAttributeValue} from '../internal/misc';
-import {OuiLocalizations, updateLocalizations} from '../l10n';
-import {COMBOBOX_AUTOCOMPLETES} from './constants.combobox';
-import {updateComboboxSelectionItems} from './dom.combobox';
-import type {OuiComboboxElement} from './index';
-import {comboboxLocalizations, comboboxStates} from './state.combobox';
-
-// #region Functions
-
-export function getComboboxAutoComplete(
-	element: OuiComboboxElement,
-	select: boolean,
-): OuiListboxAutoComplete {
-	let value: OuiListboxAutoCompleteType;
-
-	if (select) {
-		value = 'list';
-	} else {
-		value = getAttributeValue(element, 'autocomplete', COMBOBOX_AUTOCOMPLETES, 'none');
-	}
-
-	return {
-		value,
-		both: value === 'both',
-		inline: value === 'inline',
-		list: value === 'list',
-		none: value === 'none',
-	};
-}
-
-export function getComboboxId(): string {
-	index += 1;
-
-	return `oui_combobox_${index}`;
-}
-
-export function hasTextSelection(element: HTMLElement): element is HTMLInputElement {
-	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
-}
-
-/**
- * Set combobox localizations for a specific language
- *
- * @param language Language code
- * @param localizations Localizations for language
- */
-export function setComboboxLocalizations(
-	language: string,
-	localizations: Partial<OuiListboxLocalizations>,
-): void;
-
-/**
- * Set combobox localizations for one or more languages
- *
- * @param localizations Localizations for one or more languages
- */
-export function setComboboxLocalizations(
-	localizations: Record<string, Partial<OuiListboxLocalizations>>,
-): void;
-
-export function setComboboxLocalizations(
-	first: string | Record<string, Partial<OuiListboxLocalizations>>,
-	second?: Partial<OuiListboxLocalizations>,
-): void {
-	updateComboboxLocalizations(comboboxLocalizations, comboboxLocalizations.values, first, second);
-}
-
-export function updateComboboxLocalizations(
-	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 comboboxStates.set) {
-				updateListboxMessage(state);
-				updateListboxValueLabel(state);
-				updateComboboxSelectionItems(state);
-			}
-		},
-	);
-}
-
-// #endregion
-
-// #region Variables
-
-let index = 0;
-
-// #endregion

package/src/js/combobox/models.combobox.ts

@@ -1,54 +0,0 @@
-import type {OuiFloatable} from '../floatable/floatable.embedded';
-import type {OuiListboxState, OuiListboxType} from '../internal/listbox/listbox.model';
-
-// #region Types
-
-export type OuiComboboxAnchor = {
-	container?: HTMLElement;
-	element: HTMLElement;
-};
-
-export type OuiComboboxFilter = {
-	element: HTMLInputElement;
-	value: string;
-};
-
-export type OuiComboboxGroup = {
-	element: HTMLElement;
-	header: HTMLElement;
-	options: HTMLElement[];
-};
-
-export type OuiComboboxLabel = {
-	element: HTMLLabelElement;
-	id: string;
-};
-
-export type OuiComboboxOptions = {
-	all: HTMLElement[];
-	selected: HTMLElement[];
-};
-
-export type OuiComboboxSelection = {
-	container: HTMLElement;
-	items: OuiComboboxSelectionItem[];
-};
-
-export type OuiComboboxSelectionItem = {
-	button: HTMLButtonElement;
-	element: HTMLElement;
-};
-
-export type OuiComboboxState = {
-	anchor: OuiComboboxAnchor;
-	floatable: OuiFloatable;
-	selection?: OuiComboboxSelection;
-	type: OuiListboxType;
-} & OuiListboxState;
-
-export type OuiComboboxValues = {
-	current: string[];
-	initial: string[];
-};
-
-// #endregion