@oscarpalmer/oui 0.34.0 → 0.36.0

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

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

@@ -0,0 +1,196 @@
+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;
+
+	setAttribute(element, 'name', select.name === '' ? select.id : select.name);
+
+	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

package/dist/js/combobox/data.combobox.d.mts

@@ -1,18 +0,0 @@
-import { I as OuiComboboxState } from "../constants.combobox-DqNUGBLS.mjs";
-//#region src/js/combobox/data.combobox.d.ts
-type ApplySelectionParameters = {
-  added: boolean;
-  emit?: boolean;
-  option?: HTMLElement;
-  selected?: HTMLElement[];
-  state: OuiComboboxState;
-  values?: string[];
-};
-declare function applyComboboxSelection(parameters: ApplySelectionParameters): void;
-declare function filterComboboxOption(state: OuiComboboxState, value: unknown, textContent?: boolean): HTMLElement | undefined;
-declare function filterComboboxOptions(state: OuiComboboxState): HTMLElement | undefined;
-declare function setComboboxValue(state: OuiComboboxState, value: unknown, emit?: boolean): void;
-declare function setComboboxValues(state: OuiComboboxState, value: unknown, emit?: boolean): void;
-declare function toggleComboboxOption(state: OuiComboboxState, option?: HTMLElement): void;
-//#endregion
-export { applyComboboxSelection, filterComboboxOption, filterComboboxOptions, setComboboxValue, setComboboxValues, toggleComboboxOption };

package/dist/js/combobox/data.combobox.mjs

@@ -1,2 +0,0 @@
-import { a as setComboboxValues, i as setComboboxValue, n as filterComboboxOption, o as toggleComboboxOption, r as filterComboboxOptions, t as applyComboboxSelection } from "../data.combobox-8RwBv5ey.mjs";
-export { applyComboboxSelection, filterComboboxOption, filterComboboxOptions, setComboboxValue, setComboboxValues, toggleComboboxOption };

package/dist/js/combobox/form.combobox.d.mts

@@ -1,6 +0,0 @@
-import { I as OuiComboboxState } from "../constants.combobox-DqNUGBLS.mjs";
-//#region src/js/combobox/form.combobox.d.ts
-declare function updateComboboxForm(state: OuiComboboxState, values: string[], emit?: boolean): void;
-declare function updateComboboxValidity(state: OuiComboboxState): void;
-//#endregion
-export { updateComboboxForm, updateComboboxValidity };

package/dist/js/combobox/form.combobox.mjs

@@ -1,2 +0,0 @@
-import { M as updateComboboxValidity, j as updateComboboxForm } from "../data.combobox-8RwBv5ey.mjs";
-export { updateComboboxForm, updateComboboxValidity };

package/dist/js/combobox/i18n.combobox.d.mts

@@ -1,2 +0,0 @@
-import { B as getComboboxLanguage, H as setComboboxLocalizations, U as updateComboboxLocalizations, V as getComboboxLocalization } from "../constants.combobox-DqNUGBLS.mjs";
-export { getComboboxLanguage, getComboboxLocalization, setComboboxLocalizations, updateComboboxLocalizations };

package/dist/js/combobox/i18n.combobox.mjs

@@ -1,2 +0,0 @@
-import { F as setComboboxLocalizations, I as updateComboboxLocalizations, N as getComboboxLanguage, P as getComboboxLocalization } from "../data.combobox-8RwBv5ey.mjs";
-export { getComboboxLanguage, getComboboxLocalization, setComboboxLocalizations, updateComboboxLocalizations };

package/dist/js/constants.combobox-DqNUGBLS.d.mts

@@ -1,243 +0,0 @@
-import { r as OuiFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
-import { RemovableEventListener } from "@oscarpalmer/toretto/models";
-import { GenericCallback } from "@oscarpalmer/atoms/models";
-//#region src/js/combobox/i18n.combobox.d.ts
-declare function getComboboxLanguage(state: OuiComboboxState): string;
-declare function getComboboxLocalization<Key extends keyof OuiComboboxLocalizations>(key: Key, state: OuiComboboxState): OuiComboboxLocalizations[Key];
-/**
- * Set combobox localizations for a specific language
- *
- * @param language Language code
- * @param localizations Localizations for language
- */
-declare function setComboboxLocalizations(language: string, localizations: Partial<OuiComboboxLocalizations>): void;
-/**
- * Set combobox localizations for one or more languages
- *
- * @param localizations Localizations for one or more languages
- */
-declare function setComboboxLocalizations(localizations: Record<string, Partial<OuiComboboxLocalizations>>): void;
-declare function updateComboboxLocalizations(values: Record<string, Partial<Record<string, string | GenericCallback>>>, destination?: Record<string, Partial<OuiComboboxLocalizations>>): void;
-//#endregion
-//#region src/js/combobox/index.d.ts
-declare global {
-  interface HTMLElementTagNameMap {
-    [COMBOBOX_TAGNAME]: OuiComboboxElement;
-  }
-}
-declare class OuiComboboxElement extends HTMLElement {
-  #private;
-  static formAssociated: boolean;
-  static observedAttributes: string[];
-  /**
-   * Is the combobox disabled?
-   */
-  get disabled(): boolean;
-  /**
-   * Should the combobox be disabled?
-   */
-  set disabled(value: boolean);
-  /**
-   * Current filter value
-   */
-  get filter(): string;
-  /**
-   * Set the filter value
-   */
-  set filter(value: string);
-  /**
-   * Maximum number of selected options
-   */
-  get max(): number | undefined;
-  /**
-   * Set the maximum number of selected options
-   */
-  set max(value: number);
-  /**
-   * Minimum number of selected options
-   */
-  get min(): number | undefined;
-  /**
-   * Set the minimum number of selected options
-   */
-  set min(value: number);
-  /**
-   * Does the combobox allow multiple values?
-   */
-  get multiple(): boolean;
-  /**
-   * Name of the combobox
-   */
-  get name(): string;
-  /**
-   * Is the combobox readonly?
-   */
-  get readonly(): boolean;
-  /**
-   * Should the combobox be readonly?
-   */
-  set readonly(value: boolean);
-  /**
-   * Is the combobox required?
-   */
-  get required(): boolean;
-  /**
-   * Should the combobox be required?
-   */
-  set required(value: boolean);
-  /**
-   * Selected options
-   */
-  get selected(): HTMLElement[];
-  /**
-   * Type of combobox
-   */
-  get type(): OuiComboboxType;
-  /**
-   * Current value
-   */
-  get value(): string;
-  /**
-   * Set the value
-   */
-  set value(value: unknown);
-  /**
-   * Current values
-   */
-  get values(): string[];
-  /**
-   * Set the values
-   */
-  set values(value: unknown[]);
-  constructor();
-  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
-  /**
-   * Clear all selected options
-   */
-  clear(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  formDisabledCallback(disabled: boolean): void;
-  formResetCallback(): void;
-  formStateRestoreCallback(state: string | File | FormData, reason: unknown): void;
-  /**
-   * Set combobox localizations for a specific language
-   *
-   * @param language Language code
-   * @param localizations Localizations for language
-   */
-  setLocalizations(language: string, localizations: Partial<OuiComboboxLocalizations>): void;
-  /**
-   * Set combobox localizations for one or more languages
-   *
-   * @param localizations Localizations for one or more languages
-   */
-  setLocalizations(localizations: Record<string, Partial<OuiComboboxLocalizations>>): void;
-}
-//#endregion
-//#region src/js/combobox/models.combobox.d.ts
-type OuiComboboxAnchor = {
-  container?: HTMLElement;
-  element: HTMLElement;
-};
-type OuiComboboxAutoComplete = Record<OuiComboboxAutoCompleteType, boolean> & {
-  value: OuiComboboxAutoCompleteType;
-};
-type OuiComboboxAutoCompleteType = 'both' | 'inline' | 'list' | 'none';
-type OuiComboboxFilter = {
-  element: HTMLInputElement;
-  value: string;
-};
-type OuiComboboxGroup = {
-  element: HTMLElement;
-  header: HTMLElement;
-  options: HTMLElement[];
-};
-type OuiComboboxLabel = {
-  element: HTMLLabelElement;
-  id: string;
-};
-type OuiComboboxLocalizations = {
-  empty: string | (() => string);
-  input: string | (() => string);
-  invalid: string | (() => string);
-  max: string | ((max: number) => string);
-  min: string | ((min: number) => string);
-  remove: string | ((label: string, value: string) => string);
-  results: string | ((amount: number) => string);
-  selected: string | ((amount: number) => string);
-};
-type OuiComboboxOptions = {
-  all: HTMLElement[];
-  selected: HTMLElement[];
-};
-type OuiComboboxPreview = 'none' | 'set' | 'typed';
-type OuiComboboxSelection = {
-  container: HTMLElement;
-  items: OuiComboboxSelectionItem[];
-};
-type OuiComboboxSelectionItem = {
-  button: HTMLButtonElement;
-  element: HTMLElement;
-};
-type OuiComboboxState = {
-  active?: HTMLElement;
-  anchor: OuiComboboxAnchor;
-  autocomplete: OuiComboboxAutoComplete;
-  content: HTMLElement;
-  disabled: boolean;
-  filter: OuiComboboxFilter;
-  floatable: OuiFloatable;
-  groups?: OuiComboboxGroup[];
-  host: OuiComboboxElement;
-  id: string;
-  internals: ElementInternals;
-  label: OuiComboboxLabel;
-  listeners: RemovableEventListener[];
-  localizations: Record<string, Partial<OuiComboboxLocalizations>>;
-  max?: number;
-  min?: number;
-  message: HTMLElement;
-  name: string;
-  multiple: boolean;
-  options: OuiComboboxOptions;
-  readonly: boolean;
-  required: boolean;
-  select: HTMLSelectElement;
-  selection?: OuiComboboxSelection;
-  type: OuiComboboxType;
-  values: OuiComboboxValues;
-};
-type OuiComboboxType = 'autocomplete' | 'select';
-type OuiComboboxValues = {
-  current: string[];
-  initial: string[];
-};
-//#endregion
-//#region src/js/combobox/constants.combobox.d.ts
-declare const COMBOBOX_TAGNAME = "oui-combobox";
-declare const COMBOBOX_ATTRIBUTE_ANCHOR = "oui-combobox-anchor";
-declare const COMBOBOX_ATTRIBUTE_CONTENT = "oui-combobox-content";
-declare const COMBOBOX_ATTRIBUTE_FILTER = "oui-combobox-filter";
-declare const COMBOBOX_ATTRIBUTE_FILTER_INPUT = "oui-combobox-filter-input";
-declare const COMBOBOX_ATTRIBUTE_HEADER = "oui-combobox-header";
-declare const COMBOBOX_ATTRIBUTE_HIDDEN = "oui-combobox-hidden";
-declare const COMBOBOX_ATTRIBUTE_LIST = "oui-combobox-list";
-declare const COMBOBOX_ATTRIBUTE_MESSAGE = "oui-combobox-message";
-declare const COMBOBOX_ATTRIBUTE_OPTION = "oui-combobox-option";
-declare const COMBOBOX_ATTRIBUTE_OPTION_ACTIVE = "oui-combobox-option-active";
-declare const COMBOBOX_ATTRIBUTE_SELECTION = "oui-combobox-selection";
-declare const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = "oui-combobox-selection-item";
-declare const COMBOBOX_AUTOCOMPLETES: Set<OuiComboboxAutoCompleteType>;
-declare const COMBOBOX_KEYS_ACTIVATION: Set<string>;
-declare const COMBOBOX_KEYS_NAVIGATION: Set<string>;
-declare const COMBOBOX_KEYS_SELECTION: Set<string>;
-declare const COMBOBOX_MESSAGE_LABEL = "<oui-combobox> must contain a <label> element for the <select> element";
-declare const COMBOBOX_MESSAGE_SELECT = "<oui-combobox> must contain a valid <select> element";
-declare const COMBOBOX_SELECTOR_ANCHOR = "[oui-combobox-anchor]";
-declare const COMBOBOX_SELECTOR_SELECTION_ITEM = "[oui-combobox-selection-item]";
-declare const COMBOBOX_SELECTOR_OPTION = "[oui-combobox-option]";
-declare const COMBOBOX_TYPES: Set<OuiComboboxType>;
-declare const comboboxScrollOptions: ScrollIntoViewOptions;
-//#endregion
-export { OuiComboboxLabel as A, getComboboxLanguage as B, COMBOBOX_TYPES as C, OuiComboboxAutoCompleteType as D, OuiComboboxAutoComplete as E, OuiComboboxSelectionItem as F, setComboboxLocalizations as H, OuiComboboxState as I, OuiComboboxType as L, OuiComboboxOptions as M, OuiComboboxPreview as N, OuiComboboxFilter as O, OuiComboboxSelection as P, OuiComboboxValues as R, COMBOBOX_TAGNAME as S, OuiComboboxAnchor as T, updateComboboxLocalizations as U, getComboboxLocalization as V, COMBOBOX_MESSAGE_LABEL as _, COMBOBOX_ATTRIBUTE_HEADER as a, COMBOBOX_SELECTOR_OPTION as b, COMBOBOX_ATTRIBUTE_MESSAGE as c, COMBOBOX_ATTRIBUTE_SELECTION as d, COMBOBOX_ATTRIBUTE_SELECTION_ITEM as f, COMBOBOX_KEYS_SELECTION as g, COMBOBOX_KEYS_NAVIGATION as h, COMBOBOX_ATTRIBUTE_FILTER_INPUT as i, OuiComboboxLocalizations as j, OuiComboboxGroup as k, COMBOBOX_ATTRIBUTE_OPTION as l, COMBOBOX_KEYS_ACTIVATION as m, COMBOBOX_ATTRIBUTE_CONTENT as n, COMBOBOX_ATTRIBUTE_HIDDEN as o, COMBOBOX_AUTOCOMPLETES as p, COMBOBOX_ATTRIBUTE_FILTER as r, COMBOBOX_ATTRIBUTE_LIST as s, COMBOBOX_ATTRIBUTE_ANCHOR as t, COMBOBOX_ATTRIBUTE_OPTION_ACTIVE as u, COMBOBOX_MESSAGE_SELECT as v, comboboxScrollOptions as w, COMBOBOX_SELECTOR_SELECTION_ITEM as x, COMBOBOX_SELECTOR_ANCHOR as y, OuiComboboxElement as z };