@oscarpalmer/oui 0.39.0 → 0.40.0

package/dist/js/listbox/event.listbox.d.mts

@@ -1,4 +1,4 @@
-import { c as OuiListboxPreview, l as OuiListboxState } from "../listbox.model-BHPA7GM4.mjs";
+import { c as OuiListboxPreview, l as OuiListboxState } from "../listbox.model-CuBOj4qe.mjs";
 //#region src/js/listbox/event.listbox.d.ts
 export declare function onListboxEnter(state: OuiListboxState): void;
 export declare function onListboxFilter(preview: OuiListboxPreview, state: OuiListboxState, _: boolean, active?: HTMLElement): void;

package/dist/js/listbox/event.listbox.mjs

@@ -1,2 +1,48 @@
-import { d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../misc.listbox-DKB-j0UK.mjs";
+import { n as filterListbox, s as toggleListboxOption, t as applyListboxSelection, y as updateListboxPreview } from "../listbox.data-BQyZGKgr.mjs";
+import { processListboxKeydown } from "../internal/listbox/listbox.event.mjs";
+import { LISTBOX_SYMBOL, LISTBOX_TAGNAME, listboxSelectors } from "./constants.listbox.mjs";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/js/listbox/event.listbox.ts
+function onListboxClick(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listbox?.[LISTBOX_SYMBOL];
+	if (listbox == null || state == null) return;
+	const option = findAncestor(event, listboxSelectors.option);
+	if (option == null) return;
+	const { disabled, filter, readonly } = state.component;
+	if (disabled) filter.element.focus();
+	else if (readonly) updateListboxPreview("none", state, option, false);
+	else toggleListboxOption(state, option);
+}
+function onListboxEnter(state) {
+	if (!state.component.disabled && !state.component.readonly) toggleListboxOption(state, state.component.active);
+}
+function onListboxFilter(preview, state, _, active) {
+	updateListboxPreview(preview, state, active);
+}
+function onListboxInput(event) {
+	const state = findAncestor(event, LISTBOX_TAGNAME)?.[LISTBOX_SYMBOL];
+	if (state?.component.filter.element === event.target) filterListbox(event.inputType, state);
+}
+function onListboxKeydown(event) {
+	const state = findAncestor(event, LISTBOX_TAGNAME)?.[LISTBOX_SYMBOL];
+	if (state?.component.filter.element === event.target) processListboxKeydown(event, state);
+}
+function onListboxNavigation(preview, state, active) {
+	if (state.component.multiple || state.component.readonly) updateListboxPreview(preview, state, active);
+	else applyListboxSelection({
+		state,
+		option: active,
+		added: true,
+		selected: active == null ? [] : [active]
+	});
+}
+function onListboxToggle(state) {
+	state.component.filter.element.focus();
+}
+on(document, "click", onListboxClick);
+on(document, "input", onListboxInput);
+on(document, "keydown", onListboxKeydown, { passive: false });
+//#endregion
 export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };

package/dist/js/listbox/index.d.mts

@@ -1,14 +1,16 @@
-import { o as OuiListboxLocalizations } from "../listbox.model-BHPA7GM4.mjs";
-import { i as LISTBOX_TAGNAME } from "../constants.listbox-DGnX32kv.mjs";
-import { n as setListboxLocalizations } from "../misc.listbox-mZMuYOxg.mjs";
+import { l as OuiListboxState, o as OuiListboxLocalizations } from "../listbox.model-CuBOj4qe.mjs";
+import { n as LISTBOX_TAGNAME, t as LISTBOX_SYMBOL } from "../constants.listbox-C5Ap6Ag_.mjs";
+import { n as setListboxLocalizations } from "../misc.listbox-CtoGvXQo.mjs";
 //#region src/js/listbox/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
     [LISTBOX_TAGNAME]: OuiListboxElement;
   }
 }
+export interface OuiListboxElement {
+  [LISTBOX_SYMBOL]: OuiListboxState;
+}
 export declare class OuiListboxElement extends HTMLElement {
-  #private;
   static formAssociated: boolean;
   static observedAttributes: string[];
   /**

package/dist/js/listbox/index.mjs

@@ -1,7 +1,7 @@
-import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-DQ7-x2uY.mjs";
+import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-BQyZGKgr.mjs";
 import { attachListbox, detachListbox } from "../internal/listbox/listbox.state.mjs";
-import { LISTBOX_TAGNAME } from "./constants.listbox.mjs";
-import { c as onDetachListbox, i as createListboxState, n as setListboxLocalizations, o as listboxStates, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-DKB-j0UK.mjs";
+import { LISTBOX_SYMBOL, LISTBOX_TAGNAME } from "./constants.listbox.mjs";
+import { c as onDetachListbox, i as initializeListbox, n as setListboxLocalizations, o as listboxes, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-CjfBUbHD.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/listbox/index.ts
@@ -13,68 +13,65 @@ var OuiListboxElement = class extends HTMLElement {
 		"required",
 		"value"
 	];
-	#internals;
-	#restored;
-	#state;
 	/**
 	* Is the listbox disabled?
 	*/
 	get disabled() {
-		return this.#state?.disabled ?? false;
+		return this[LISTBOX_SYMBOL].component?.disabled ?? false;
 	}
 	/**
 	* Should the listbox be disabled?
 	*/
 	set disabled(value) {
-		if (typeof value === "boolean" && value !== this.disabled) setListboxDisabled(this.#state, value);
+		if (typeof value === "boolean" && value !== this.disabled) setListboxDisabled(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Current filter value
 	*/
 	get filter() {
-		return this.#state.filter.element.value;
+		return this[LISTBOX_SYMBOL].component?.filter.element.value ?? "";
 	}
 	/**
 	* Set the filter value
 	*/
 	set filter(value) {
-		setListboxFilter(this.#state, value);
+		setListboxFilter(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Form element associated with the listbox
 	*/
 	get form() {
-		return this.#internals.form;
+		return this[LISTBOX_SYMBOL].form.internals.form;
 	}
 	/**
 	* Label elements associated with the listbox
 	*/
 	get labels() {
-		return this.#internals.labels;
+		return this[LISTBOX_SYMBOL].form.internals.labels;
 	}
 	/**
 	* Maximum number of selected options
 	*/
 	get max() {
-		return this.#state?.max;
+		return this[LISTBOX_SYMBOL].component?.max;
 	}
 	/**
 	* Set the maximum number of selected options
 	*/
 	set max(value) {
-		setListboxLimit("max", this.#state, value);
+		setListboxLimit("max", this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Minimum number of selected options
 	*/
 	get min() {
-		return this.#state?.min;
+		return this[LISTBOX_SYMBOL].component?.min;
 	}
 	/**
 	* Set the minimum number of selected options
 	*/
 	set min(value) {
-		setListboxLimit("min", this.#state, value);
+		setListboxLimit("min", this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Does the listbox allow multiple values?
@@ -92,87 +89,91 @@ var OuiListboxElement = class extends HTMLElement {
 	* Is the listbox readonly?
 	*/
 	get readonly() {
-		return this.#state?.readonly ?? false;
+		return this[LISTBOX_SYMBOL].component?.readonly ?? false;
 	}
 	/**
 	* Should the listbox be readonly?
 	*/
 	set readonly(value) {
-		if (typeof value === "boolean" && value !== this.readonly) setListboxReadonly(this.#state, value);
+		if (typeof value === "boolean" && value !== this.readonly) setListboxReadonly(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Is the listbox required?
 	*/
 	get required() {
-		return this.#state?.required ?? false;
+		return this[LISTBOX_SYMBOL].component?.required ?? false;
 	}
 	/**
 	* Should the listbox be required?
 	*/
 	set required(value) {
-		if (typeof value === "boolean" && value !== this.required) setListboxRequired(this.#state, value);
+		if (typeof value === "boolean" && value !== this.required) setListboxRequired(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Selected options
 	*/
 	get selected() {
-		return this.#state.options.selected.slice();
+		return this[LISTBOX_SYMBOL].component?.options.selected.slice() ?? [];
 	}
 	/**
 	* Validation message for the listbox
 	*/
 	get validationMessage() {
-		return this.#internals.validationMessage;
+		return this[LISTBOX_SYMBOL].form.internals.validationMessage;
 	}
 	/**
 	* Validity state for the listbox
 	*/
 	get validity() {
-		return this.#internals.validity;
+		return this[LISTBOX_SYMBOL].form.internals.validity;
 	}
 	/**
 	* Current value
 	*/
 	get value() {
-		return this.#state.values.current[0];
+		return this[LISTBOX_SYMBOL].component?.values.current[0] ?? "";
 	}
 	/**
 	* Set the value
 	*/
 	set value(value) {
-		setListboxValue(this.#state, value);
+		setListboxValue(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Current values
 	*/
 	get values() {
-		return this.#state.values.current.slice();
+		return this[LISTBOX_SYMBOL].component?.values.current.slice() ?? [];
 	}
 	/**
 	* Set the values
 	*/
 	set values(values) {
-		setListboxValues(this.#state, values);
+		setListboxValues(this[LISTBOX_SYMBOL], values);
 	}
 	/**
 	* Can the listbox be validated?
 	*/
 	get willValidate() {
-		return this.#internals.willValidate;
+		return this[LISTBOX_SYMBOL].form.internals.willValidate;
 	}
 	constructor() {
 		super();
-		this.#internals = this.attachInternals();
+		this[LISTBOX_SYMBOL] = {
+			component: null,
+			form: { internals: this.attachInternals() }
+		};
 	}
 	attributeChangedCallback(name, _, value) {
-		if (this.#state == null) return;
+		const state = this[LISTBOX_SYMBOL];
+		if (state.component == null) return;
 		switch (name) {
 			case "required":
 				this[name] = this.hasAttribute(name);
 				break;
 			case "max":
 			case "min":
-				setListboxLimit(name, this.#state, value);
+				setListboxLimit(name, state, value);
 				break;
 			case "value": this.value = value ?? "";
 		}
@@ -183,33 +184,36 @@ var OuiListboxElement = class extends HTMLElement {
 	* @returns `true` if the listbox is valid, otherwise `false`
 	*/
 	checkValidity() {
-		return this.#internals.checkValidity();
+		return this[LISTBOX_SYMBOL].form.internals.checkValidity();
 	}
 	/**
 	* Clear all selected options
 	*/
 	clear() {
-		setListboxValues(this.#state, []);
+		setListboxValues(this[LISTBOX_SYMBOL], []);
 	}
 	connectedCallback() {
-		if (this.#state == null) this.#initialize();
-		else attachListbox(this.#state, listboxStates, onAttachListbox);
+		const state = this[LISTBOX_SYMBOL];
+		if (state.component == null) initializeListbox(this, state);
+		else attachListbox(state, listboxes, onAttachListbox);
 	}
 	disconnectedCallback() {
-		if (this.#state != null) detachListbox(this.#state, listboxStates, onDetachListbox);
+		const state = this[LISTBOX_SYMBOL];
+		if (state.component != null) detachListbox(state, listboxes, onDetachListbox);
 	}
 	formDisabledCallback(disabled) {
 		this.disabled = disabled;
 	}
 	formResetCallback() {
-		setListboxValues(this.#state, this.#state.values.initial);
+		const state = this[LISTBOX_SYMBOL];
+		setListboxValues(state, state.component.values.initial);
 	}
 	formStateRestoreCallback(state, reason) {
 		if (reason !== "restore") return;
 		const parsed = typeof state === "string" ? parse(state) : void 0;
 		if (!Array.isArray(parsed)) return;
-		if (this.#state == null) this.#restored = parsed;
-		else setListboxValues(this.#state, parsed);
+		if (this[LISTBOX_SYMBOL]?.component == null) this[LISTBOX_SYMBOL].form.restored = parsed;
+		else setListboxValues(this[LISTBOX_SYMBOL], parsed);
 	}
 	/**
 	* Check if the listbox is valid and report any validation errors
@@ -217,7 +221,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* @returns `true` if the listbox is valid, otherwise `false`
 	*/
 	reportValidity() {
-		return this.#internals.reportValidity();
+		return this[LISTBOX_SYMBOL].form.internals.reportValidity();
 	}
 	/**
 	* Set a custom validation message for the listbox
@@ -225,17 +229,11 @@ var OuiListboxElement = class extends HTMLElement {
 	* @param message Validation message
 	*/
 	setCustomValidity(message) {
-		this.#internals.setValidity({ customError: message !== "" }, message, this);
+		this[LISTBOX_SYMBOL].form.internals.setValidity({ customError: message !== "" }, message, this);
 	}
 	setLocalizations(first, second) {
-		updateListboxLocalizations(this.#state.localizations.global, this.#state.localizations.component, first, second);
-	}
-	#initialize() {
-		this.#state = createListboxState(this, this.#internals);
-		if (this.#restored != null) {
-			setListboxValues(this.#state, this.#restored);
-			this.#restored = void 0;
-		}
+		const { localizations } = this[LISTBOX_SYMBOL].component;
+		updateListboxLocalizations(localizations.global, localizations.component, first, second);
 	}
 };
 customElements.define(LISTBOX_TAGNAME, OuiListboxElement);

package/dist/js/listbox/misc.listbox.d.mts

@@ -1,2 +1,2 @@
-import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-mZMuYOxg.mjs";
+import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-CtoGvXQo.mjs";
 export { getListboxId, setListboxLocalizations, updateListboxLocalizations };

package/dist/js/listbox/misc.listbox.mjs

@@ -1,2 +1,2 @@
-import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-DKB-j0UK.mjs";
+import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-CjfBUbHD.mjs";
 export { getListboxId, setListboxLocalizations, updateListboxLocalizations };

package/dist/js/listbox/state.listbox.d.mts

@@ -1,10 +1,9 @@
-import { t as OuiLocalizations } from "../l10n-Bn-7RcwR.mjs";
-import { l as OuiListboxState, o as OuiListboxLocalizations, u as OuiListboxStates } from "../listbox.model-BHPA7GM4.mjs";
-import { OuiListboxElement } from "./index.mjs";
+import { c as OuiLocalizations } from "../l10n.model-D6a9frgl.mjs";
+import { l as OuiListboxState, o as OuiListboxLocalizations } from "../listbox.model-CuBOj4qe.mjs";
 //#region src/js/listbox/state.listbox.d.ts
-export declare function createListboxState(element: OuiListboxElement, internals: ElementInternals): OuiListboxState;
+export declare function initializeListbox(element: HTMLElement, state: OuiListboxState): void;
 export declare function onAttachListbox(state: OuiListboxState): void;
 export declare function onDetachListbox(state: OuiListboxState): void;
 export declare const listboxLocalizations: OuiLocalizations<OuiListboxLocalizations>;
-export declare const listboxStates: OuiListboxStates;
+export declare const listboxes: Set<OuiListboxState>;
 //#endregion

package/dist/js/listbox/state.listbox.mjs

@@ -1,2 +1,2 @@
-import { a as listboxLocalizations, c as onDetachListbox, i as createListboxState, o as listboxStates, s as onAttachListbox } from "../misc.listbox-DKB-j0UK.mjs";
-export { createListboxState, listboxLocalizations, listboxStates, onAttachListbox, onDetachListbox };
+import { a as listboxLocalizations, c as onDetachListbox, i as initializeListbox, o as listboxes, s as onAttachListbox } from "../misc.listbox-CjfBUbHD.mjs";
+export { initializeListbox, listboxLocalizations, listboxes, onAttachListbox, onDetachListbox };