@oscarpalmer/oui 0.35.0 → 0.37.0

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

@@ -0,0 +1,116 @@
+import { o as OuiListboxLocalizations } from "../listbox.model-CRReGOmu.mjs";
+import { i as LISTBOX_TAGNAME } from "../constants.listbox-DRsXUxd3.mjs";
+import { n as setListboxLocalizations } from "../misc.listbox-gnoJhrTr.mjs";
+//#region src/js/listbox/index.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [LISTBOX_TAGNAME]: OuiListboxElement;
+  }
+}
+declare class OuiListboxElement extends HTMLElement {
+  #private;
+  static formAssociated: boolean;
+  static observedAttributes: string[];
+  /**
+   * Is the listbox disabled?
+   */
+  get disabled(): boolean;
+  /**
+   * Should the listbox 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 listbox allow multiple values?
+   */
+  get multiple(): boolean;
+  /**
+   * Name of the listbox
+   */
+  get name(): string;
+  /**
+   * Is the listbox readonly?
+   */
+  get readonly(): boolean;
+  /**
+   * Should the listbox be readonly?
+   */
+  set readonly(value: boolean);
+  /**
+   * Is the listbox required?
+   */
+  get required(): boolean;
+  /**
+   * Should the listbox be required?
+   */
+  set required(value: boolean);
+  /**
+   * Selected options
+   */
+  get selected(): HTMLElement[];
+  /**
+   * Current value
+   */
+  get value(): string;
+  /**
+   * Set the value
+   */
+  set value(value: unknown);
+  /**
+   * Current values
+   */
+  get values(): string[];
+  /**
+   * Set the values
+   */
+  set values(values: 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 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;
+}
+//#endregion
+export { OuiListboxElement, setListboxLocalizations };

package/dist/js/listbox/index.mjs

@@ -0,0 +1,189 @@
+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-BWd0PCy7.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-BI-XsTOf.mjs";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+import { parse } from "@oscarpalmer/atoms/string";
+//#region src/js/listbox/index.ts
+var OuiListboxElement = class extends HTMLElement {
+	static formAssociated = true;
+	static observedAttributes = [
+		"max",
+		"min",
+		"required",
+		"value"
+	];
+	#internals;
+	#restored;
+	#state;
+	/**
+	* Is the listbox disabled?
+	*/
+	get disabled() {
+		return this.#state?.disabled ?? false;
+	}
+	/**
+	* Should the listbox be disabled?
+	*/
+	set disabled(value) {
+		if (typeof value === "boolean" && value !== this.disabled) setListboxDisabled(this.#state, value);
+	}
+	/**
+	* Current filter value
+	*/
+	get filter() {
+		return this.#state.filter.element.value;
+	}
+	/**
+	* Set the filter value
+	*/
+	set filter(value) {
+		setListboxFilter(this.#state, value);
+	}
+	/**
+	* Maximum number of selected options
+	*/
+	get max() {
+		return this.#state?.max;
+	}
+	/**
+	* Set the maximum number of selected options
+	*/
+	set max(value) {
+		setListboxLimit("max", this.#state, value);
+	}
+	/**
+	* Minimum number of selected options
+	*/
+	get min() {
+		return this.#state?.min;
+	}
+	/**
+	* Set the minimum number of selected options
+	*/
+	set min(value) {
+		setListboxLimit("min", this.#state, value);
+	}
+	/**
+	* Does the listbox allow multiple values?
+	*/
+	get multiple() {
+		return this.hasAttribute("multiple");
+	}
+	/**
+	* Name of the listbox
+	*/
+	get name() {
+		return getAttribute(this, "name") ?? "";
+	}
+	/**
+	* Is the listbox readonly?
+	*/
+	get readonly() {
+		return this.#state?.readonly ?? false;
+	}
+	/**
+	* Should the listbox be readonly?
+	*/
+	set readonly(value) {
+		if (typeof value === "boolean" && value !== this.readonly) setListboxReadonly(this.#state, value);
+	}
+	/**
+	* Is the listbox required?
+	*/
+	get required() {
+		return this.#state?.required ?? false;
+	}
+	/**
+	* Should the listbox be required?
+	*/
+	set required(value) {
+		if (typeof value === "boolean" && value !== this.required) setListboxRequired(this.#state, value);
+	}
+	/**
+	* Selected options
+	*/
+	get selected() {
+		return this.#state.options.selected.slice();
+	}
+	/**
+	* Current value
+	*/
+	get value() {
+		return this.#state.values.current[0];
+	}
+	/**
+	* Set the value
+	*/
+	set value(value) {
+		setListboxValue(this.#state, value);
+	}
+	/**
+	* Current values
+	*/
+	get values() {
+		return this.#state.values.current.slice();
+	}
+	/**
+	* Set the values
+	*/
+	set values(values) {
+		setListboxValues(this.#state, values);
+	}
+	constructor() {
+		super();
+		this.#internals = this.attachInternals();
+	}
+	attributeChangedCallback(name, _, value) {
+		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 ?? "";
+		}
+	}
+	/**
+	* Clear all selected options
+	*/
+	clear() {
+		setListboxValues(this.#state, []);
+	}
+	connectedCallback() {
+		if (this.#state == null) this.#initialize();
+		else attachListbox(this.#state, listboxStates, onAttachListbox);
+	}
+	disconnectedCallback() {
+		if (this.#state != null) detachListbox(this.#state, listboxStates, onDetachListbox);
+	}
+	formDisabledCallback(disabled) {
+		this.disabled = disabled;
+	}
+	formResetCallback() {
+		setListboxValues(this.#state, this.#state.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);
+	}
+	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;
+		}
+	}
+};
+customElements.define(LISTBOX_TAGNAME, OuiListboxElement);
+//#endregion
+export { OuiListboxElement, setListboxLocalizations };

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { a as listboxLocalizations, c as onDetachListbox, i as createListboxState, o as listboxStates, s as onAttachListbox } from "../misc.listbox-BI-XsTOf.mjs";
+export { createListboxState, listboxLocalizations, listboxStates, onAttachListbox, onDetachListbox };