@oscarpalmer/oui 0.39.0 → 0.41.0

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

@@ -1,2 +1,152 @@
-import { a as setComboboxLocalizations, t as OuiComboboxElement } from "../index-C5D3-oiI.mjs";
-export { OuiComboboxElement, setComboboxLocalizations };
+import { p as OuiLocalizations } from "../l10n.model-D1E1u35L.mjs";
+import { _ as OptionListType } from "../option-list.model-CCPUlPeX.mjs";
+import { a as COMBOBOX_SYMBOL, o as COMBOBOX_TAGNAME } from "../combobox.constants-Hb3bqqQJ.mjs";
+import { a as OuiComboboxLocalizations, l as OuiComboboxState } from "../combobox.model-gjEI2VqZ.mjs";
+import { i as setComboboxLocalizations } from "../combobox.misc-DRDFk6X8.mjs";
+//#region src/js/combobox/index.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [COMBOBOX_TAGNAME]: OuiComboboxElement & {
+      [COMBOBOX_SYMBOL]: OuiComboboxState;
+    };
+  }
+}
+export interface OuiComboboxElement {
+  [COMBOBOX_SYMBOL]: OuiComboboxState;
+}
+export declare class OuiComboboxElement extends HTMLElement {
+  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);
+  /**
+   * Form element associated with the combobox
+   */
+  get form(): HTMLFormElement | null;
+  /**
+   * Label elements associated with the combobox
+   */
+  get labels(): NodeList;
+  get localizations(): OuiLocalizations<OuiComboboxLocalizations>;
+  /**
+   * 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(): Element[];
+  /**
+   * Type of combobox
+   */
+  get type(): OptionListType;
+  /**
+   * Validation message for the combobox
+   */
+  get validationMessage(): string;
+  /**
+   * Validity state for the combobox
+   */
+  get validity(): ValidityState;
+  /**
+   * Current value
+   */
+  get value(): string;
+  /**
+   * Set the value
+   */
+  set value(value: unknown);
+  /**
+   * Current values
+   */
+  get values(): string[];
+  /**
+   * Set the values
+   */
+  set values(values: unknown[]);
+  /**
+   * Can the combobox be validated?
+   */
+  get willValidate(): boolean;
+  constructor();
+  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  /**
+   * Check if the combobox is valid
+   *
+   * @returns `true` if the combobox is valid, otherwise `false`
+   */
+  checkValidity(): boolean;
+  /**
+   * Clear all selected options
+   */
+  clear(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  formDisabledCallback(disabled: boolean): void;
+  formResetCallback(): void;
+  formStateRestoreCallback(state: unknown, reason: unknown): void;
+  /**
+   * Check if the combobox is valid and report any validation errors
+   *
+   * @returns `true` if the combobox is valid, otherwise `false`
+   */
+  reportValidity(): boolean;
+  /**
+   * Set a custom validation message for the combobox
+   *
+   * @param message Validation message
+   */
+  setCustomValidity(message: string): void;
+}
+//#endregion
+export { setComboboxLocalizations };

package/dist/js/combobox/index.mjs

@@ -1,8 +1,7 @@
-import { updateLocalizations } from "../l10n.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-DQ7-x2uY.mjs";
-import { attachListbox, detachListbox } from "../internal/listbox/listbox.state.mjs";
-import { COMBOBOX_TAGNAME } from "./constants.combobox.mjs";
-import { D as setComboboxLocalizations, a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState } from "../state.combobox-BWDFHwoi.mjs";
+import { C as setOptionListDisabled, D as setOptionListReadonly, O as setOptionListRequired, T as setOptionListLimit, a as setOptionListValue, o as setOptionListValues, w as setOptionListFilter } from "../option-list.data-CgMyUwPc.mjs";
+import { attachOptionList, detachOptionList } from "../internal/option-list/option-list.state.mjs";
+import { COMBOBOX_SYMBOL, COMBOBOX_TAGNAME } from "./combobox.constants.mjs";
+import { D as setComboboxLocalizations, a as onDetachCombobox, i as onAttachCombobox, n as comboboxes, r as initializeCombobox } from "../combobox.state-AstCICiH.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/combobox/index.ts
@@ -14,68 +13,68 @@ var OuiComboboxElement = class extends HTMLElement {
 		"required",
 		"value"
 	];
-	#internals;
-	#restored;
-	#state;
 	/**
 	* Is the combobox disabled?
 	*/
 	get disabled() {
-		return this.#state?.disabled ?? false;
+		return this[COMBOBOX_SYMBOL].component?.disabled ?? false;
 	}
 	/**
 	* Should the combobox be disabled?
 	*/
 	set disabled(value) {
-		if (typeof value === "boolean" && value !== this.disabled) setListboxDisabled(this.#state, value);
+		if (typeof value === "boolean" && value !== this.disabled) setOptionListDisabled(this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Current filter value
 	*/
 	get filter() {
-		return this.#state.filter.element.value;
+		return this[COMBOBOX_SYMBOL].component?.filter.element.value ?? "";
 	}
 	/**
 	* Set the filter value
 	*/
 	set filter(value) {
-		setListboxFilter(this.#state, value);
+		setOptionListFilter(this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Form element associated with the combobox
 	*/
 	get form() {
-		return this.#internals.form;
+		return this[COMBOBOX_SYMBOL].form.internals.form;
 	}
 	/**
 	* Label elements associated with the combobox
 	*/
 	get labels() {
-		return this.#internals.labels;
+		return this[COMBOBOX_SYMBOL].form.internals.labels;
+	}
+	get localizations() {
+		return this[COMBOBOX_SYMBOL].component?.localizations;
 	}
 	/**
 	* Maximum number of selected options
 	*/
 	get max() {
-		return this.#state?.max;
+		return this[COMBOBOX_SYMBOL].component?.max;
 	}
 	/**
 	* Set the maximum number of selected options
 	*/
 	set max(value) {
-		setListboxLimit("max", this.#state, value);
+		setOptionListLimit("max", this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Minimum number of selected options
 	*/
 	get min() {
-		return this.#state?.min;
+		return this[COMBOBOX_SYMBOL].component?.min;
 	}
 	/**
 	* Set the minimum number of selected options
 	*/
 	set min(value) {
-		setListboxLimit("min", this.#state, value);
+		setOptionListLimit("min", this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Does the combobox allow multiple values?
@@ -93,93 +92,97 @@ var OuiComboboxElement = class extends HTMLElement {
 	* Is the combobox readonly?
 	*/
 	get readonly() {
-		return this.#state?.readonly ?? false;
+		return this[COMBOBOX_SYMBOL].component?.readonly ?? false;
 	}
 	/**
 	* Should the combobox be readonly?
 	*/
 	set readonly(value) {
-		if (typeof value === "boolean" && value !== this.readonly) setListboxReadonly(this.#state, value);
+		if (typeof value === "boolean" && value !== this.readonly) setOptionListReadonly(this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Is the combobox required?
 	*/
 	get required() {
-		return this.#state?.required ?? false;
+		return this[COMBOBOX_SYMBOL].component?.required ?? false;
 	}
 	/**
 	* Should the combobox be required?
 	*/
 	set required(value) {
-		if (typeof value === "boolean" && value !== this.required) setListboxRequired(this.#state, value);
+		if (typeof value === "boolean" && value !== this.required) setOptionListRequired(this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Selected options
 	*/
 	get selected() {
-		return this.#state.options.selected.slice();
+		return this[COMBOBOX_SYMBOL].component?.options.selected.slice() ?? [];
 	}
 	/**
 	* Type of combobox
 	*/
 	get type() {
-		return this.#state.type;
+		return this[COMBOBOX_SYMBOL].component?.type;
 	}
 	/**
 	* Validation message for the combobox
 	*/
 	get validationMessage() {
-		return this.#internals.validationMessage;
+		return this[COMBOBOX_SYMBOL].form.internals.validationMessage;
 	}
 	/**
 	* Validity state for the combobox
 	*/
 	get validity() {
-		return this.#internals.validity;
+		return this[COMBOBOX_SYMBOL].form.internals.validity;
 	}
 	/**
 	* Current value
 	*/
 	get value() {
-		return this.#state.values.current[0];
+		return this[COMBOBOX_SYMBOL].component?.values.current[0] ?? "";
 	}
 	/**
 	* Set the value
 	*/
 	set value(value) {
-		setListboxValue(this.#state, value);
+		setOptionListValue(this[COMBOBOX_SYMBOL], value);
 	}
 	/**
 	* Current values
 	*/
 	get values() {
-		return this.#state.values.current.slice();
+		return this[COMBOBOX_SYMBOL].component?.values.current.slice() ?? [];
 	}
 	/**
 	* Set the values
 	*/
 	set values(values) {
-		setListboxValues(this.#state, values);
+		setOptionListValues(this[COMBOBOX_SYMBOL], values);
 	}
 	/**
 	* Can the combobox be validated?
 	*/
 	get willValidate() {
-		return this.#internals.willValidate;
+		return this[COMBOBOX_SYMBOL].form.internals.willValidate;
 	}
 	constructor() {
 		super();
-		this.#internals = this.attachInternals();
+		this[COMBOBOX_SYMBOL] = {
+			component: void 0,
+			form: { internals: this.attachInternals() }
+		};
 	}
 	attributeChangedCallback(name, _, value) {
-		if (this.#state == null) return;
+		const state = this[COMBOBOX_SYMBOL];
+		if (state == null) return;
 		switch (name) {
 			case "required":
 				this[name] = this.hasAttribute(name);
 				break;
 			case "max":
 			case "min":
-				setListboxLimit(name, this.#state, value);
+				setOptionListLimit(name, state, value);
 				break;
 			case "value": this.value = value ?? "";
 		}
@@ -190,33 +193,40 @@ var OuiComboboxElement = class extends HTMLElement {
 	* @returns `true` if the combobox is valid, otherwise `false`
 	*/
 	checkValidity() {
-		return this.#internals.checkValidity();
+		return this[COMBOBOX_SYMBOL].form.internals.checkValidity();
 	}
 	/**
 	* Clear all selected options
 	*/
 	clear() {
-		setListboxValues(this.#state, []);
+		setOptionListValues(this[COMBOBOX_SYMBOL], []);
 	}
 	connectedCallback() {
-		if (this.#state == null) this.#initialize();
-		else attachListbox(this.#state, comboboxStates, onAttachCombobox);
+		const state = this[COMBOBOX_SYMBOL];
+		if (state.component == null) initializeCombobox(this, state);
+		else attachOptionList(state, comboboxes, onAttachCombobox);
 	}
 	disconnectedCallback() {
-		if (this.#state != null) detachListbox(this.#state, comboboxStates, onDetachCombobox);
+		const state = this[COMBOBOX_SYMBOL];
+		if (state.component != null) detachOptionList(state, comboboxes, onDetachCombobox);
 	}
 	formDisabledCallback(disabled) {
 		this.disabled = disabled;
 	}
 	formResetCallback() {
-		setListboxValues(this.#state, this.#state.values.initial);
+		const state = this[COMBOBOX_SYMBOL];
+		if (state.component != null) setOptionListValues(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);
+		const { component, form } = this[COMBOBOX_SYMBOL];
+		if (component == null) form.restored = parsed;
+		else setOptionListValues({
+			component,
+			form
+		}, parsed);
 	}
 	/**
 	* Check if the combobox is valid and report any validation errors
@@ -224,7 +234,7 @@ var OuiComboboxElement = class extends HTMLElement {
 	* @returns `true` if the combobox is valid, otherwise `false`
 	*/
 	reportValidity() {
-		return this.#internals.reportValidity();
+		return this[COMBOBOX_SYMBOL].form.internals.reportValidity();
 	}
 	/**
 	* Set a custom validation message for the combobox
@@ -232,18 +242,7 @@ var OuiComboboxElement = class extends HTMLElement {
 	* @param message Validation message
 	*/
 	setCustomValidity(message) {
-		this.#internals.setValidity({ customError: message !== "" }, message, this);
-	}
-	setLocalizations(first, second) {
-		updateLocalizations(this.#state.localizations.global, typeof first === "string" ? { [first]: second } : first, this.#state.localizations.component);
-	}
-	#initialize() {
-		this.tabIndex = -1;
-		this.#state = createComboboxState(this, this.#internals);
-		if (this.#restored != null) {
-			setListboxValues(this.#state, this.#restored);
-			this.#restored = void 0;
-		}
+		this[COMBOBOX_SYMBOL].form.internals.setValidity({ customError: message !== "" }, message, this);
 	}
 };
 customElements.define(COMBOBOX_TAGNAME, OuiComboboxElement);

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

@@ -0,0 +1,19 @@
+import { c as OptionListAttributes, u as OptionListAutoCompleteType } from "./option-list.model-CCPUlPeX.mjs";
+//#region src/js/combobox/combobox.constants.d.ts
+declare const COMBOBOX_TAGNAME = "oui-combobox";
+declare const COMBOBOX_ATTRIBUTE_ANCHOR: string;
+declare const COMBOBOX_ATTRIBUTE_SELECTION: string;
+declare const COMBOBOX_ATTRIBUTE_SELECTION_ITEM: string;
+declare const COMBOBOX_AUTOCOMPLETES: Set<OptionListAutoCompleteType>;
+declare const COMBOBOX_SYMBOL: unique symbol;
+declare const comboboxAttributes: OptionListAttributes;
+declare const messageLabel: string;
+declare const messageSelect: string;
+declare const comboboxMessages: Record<string, string>;
+declare const selectorAnchor: string;
+declare const selectorContent: string;
+declare const selectorOption: string;
+declare const selectorSelectionItem: string;
+declare const comboboxSelectors: Record<string, string>;
+//#endregion
+export { COMBOBOX_SYMBOL as a, comboboxMessages as c, messageSelect as d, selectorAnchor as f, selectorSelectionItem as h, COMBOBOX_AUTOCOMPLETES as i, comboboxSelectors as l, selectorOption as m, COMBOBOX_ATTRIBUTE_SELECTION as n, COMBOBOX_TAGNAME as o, selectorContent as p, COMBOBOX_ATTRIBUTE_SELECTION_ITEM as r, comboboxAttributes as s, COMBOBOX_ATTRIBUTE_ANCHOR as t, messageLabel as u };

package/dist/js/combobox.misc-DRDFk6X8.d.mts

@@ -0,0 +1,26 @@
+import { l as OptionListAutoComplete, p as OptionListLocalizationValues } from "./option-list.model-CCPUlPeX.mjs";
+//#region src/js/combobox/combobox.misc.d.ts
+declare function getComboboxAutoComplete(element: Element, select: boolean): OptionListAutoComplete;
+declare function getComboboxId(): string;
+declare function hasTextSelection(element: Element): element is HTMLInputElement;
+/**
+ * Set combobox localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+declare function setComboboxLocalizations(language: string, localizations: Partial<OptionListLocalizationValues>): void;
+/**
+ * Set default combobox localizations
+ *
+ * @param localizations Default localizations
+ */
+declare function setComboboxLocalizations(localizations: Partial<OptionListLocalizationValues>, defaults: true): void;
+/**
+ * Set combobox localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+declare function setComboboxLocalizations(localizations: Record<string, Partial<OptionListLocalizationValues>>): void;
+//#endregion
+export { setComboboxLocalizations as i, getComboboxId as n, hasTextSelection as r, getComboboxAutoComplete as t };

package/dist/js/combobox.model-gjEI2VqZ.d.mts

@@ -0,0 +1,46 @@
+import { c as OuiFloatable } from "./floatable.model-DXsQgoU7.mjs";
+import { _ as OptionListType, g as OptionListState, p as OptionListLocalizationValues } from "./option-list.model-CCPUlPeX.mjs";
+//#region src/js/combobox/combobox.model.d.ts
+type OuiComboboxAnchor = {
+  container?: Element;
+  element: HTMLElement;
+};
+type OuiComboboxFilter = {
+  element: HTMLInputElement;
+  value: string;
+};
+type OuiComboboxGroup = {
+  element: Element;
+  header: Element;
+  options: Element[];
+};
+type OuiComboboxLabel = {
+  element: HTMLLabelElement;
+  id: string;
+};
+type OuiComboboxLocalizations = OptionListLocalizationValues;
+type OuiComboboxOptions = {
+  all: Element[];
+  selected: Element[];
+};
+type OuiComboboxSelection = {
+  container: Element;
+  items: OuiComboboxSelectionItem[];
+};
+type OuiComboboxSelectionItem = {
+  button: HTMLButtonElement;
+  element: Element;
+};
+type OuiComboboxState = OptionListState<OuiComboboxStateExtras, OuiComboboxLocalizations>;
+type OuiComboboxStateExtras = {
+  anchor: OuiComboboxAnchor;
+  floatable: OuiFloatable;
+  selection?: OuiComboboxSelection;
+  type: OptionListType;
+};
+type OuiComboboxValues = {
+  current: string[];
+  initial: string[];
+};
+//#endregion
+export { OuiComboboxLocalizations as a, OuiComboboxSelectionItem as c, OuiComboboxValues as d, OuiComboboxLabel as i, OuiComboboxState as l, OuiComboboxFilter as n, OuiComboboxOptions as o, OuiComboboxGroup as r, OuiComboboxSelection as s, OuiComboboxAnchor as t, OuiComboboxStateExtras as u };