@oscarpalmer/oui 0.34.0 → 0.36.0

package/dist/js/listbox.model-CRReGOmu.d.mts

@@ -0,0 +1,125 @@
+import { n as OuiLocalizationsValues, t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+//#region src/js/internal/listbox/listbox.model.d.ts
+type OuiListboxAttributes = {
+  active: string;
+  content: string;
+  empty: string;
+  filter: string;
+  group: string;
+  header: string;
+  hidden: string;
+  input: string;
+  list: string;
+  message: string;
+  option: string;
+};
+type OuiListboxAutoComplete = Record<OuiListboxAutoCompleteType, boolean> & {
+  value?: OuiListboxAutoCompleteType;
+};
+type OuiListboxAutoCompleteType = 'both' | 'inline' | 'list' | 'none';
+type OuiListboxCallbacks<State extends OuiListboxState = OuiListboxState> = {
+  data: OuiListboxCallbacksData<State>;
+  keydown: OuiListboxCallbacksKeydown<State>;
+};
+type OuiListboxCallbacksData<State extends OuiListboxState = OuiListboxState> = {
+  onApply: OuiListboxCallbacksDataOnApply<State>;
+  onFilter: OuiListboxCallbacksDataOnFilter<State>;
+  onForm: (state: State) => void;
+  onPreview: OuiListboxCallbacksDataOnPreview<State>;
+  onToggle: (state: State) => void;
+};
+type OuiListboxCallbacksDataOnApply<State extends OuiListboxState = OuiListboxState> = (state: State, option: HTMLElement | undefined, values: string[], added: boolean, selected?: HTMLElement[], emit?: boolean) => void;
+type OuiListboxCallbacksDataOnFilter<State extends OuiListboxState = OuiListboxState> = (preview: OuiListboxPreview, state: State, update: boolean, active?: HTMLElement, emit?: boolean) => void;
+type OuiListboxCallbacksDataOnPreview<State extends OuiListboxState = OuiListboxState> = (preview: OuiListboxPreview, state: State, active?: HTMLElement) => void;
+type OuiListboxCallbacksKeydown<State extends OuiListboxState = OuiListboxState> = {
+  onActivation?: (state: State) => void;
+  onEnter?: (state: State) => void;
+  onEscape?: (state: State) => void;
+  onNavigation: OuiListboxCallbacksDataOnNavigation<State>;
+  onSelection?: (state: State) => void;
+  onTab?: (state: State) => void;
+  onToggle?: (state: State) => void;
+  preventActivation?: (state: State) => boolean;
+  skipNavigation?: (state: State) => boolean;
+};
+type OuiListboxCallbacksDataOnNavigation<State extends OuiListboxState = OuiListboxState> = (preview: OuiListboxPreview, state: State, active?: HTMLElement) => void;
+type OuiListboxFilter = {
+  element: HTMLInputElement;
+  value: string;
+};
+type OuiListboxFooter = {
+  container: HTMLElement;
+  message: HTMLElement;
+};
+type OuiListboxGroup = {
+  element: HTMLElement;
+  header: HTMLElement;
+  options: HTMLElement[];
+};
+type OuiListboxLabel = {
+  element: HTMLLabelElement;
+  id: string;
+};
+type OuiListboxLocalization<Localizations extends OuiLocalizationsValues> = {
+  component: Record<string, Partial<Localizations>>;
+  global: OuiLocalizations<Localizations>;
+};
+type OuiListboxLocalizations = {
+  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 OuiListboxOptions = {
+  all: HTMLElement[];
+  selected: HTMLElement[];
+};
+type OuiListboxPreview = 'none' | 'set' | 'typed';
+type OuiListboxState = {
+  active?: HTMLElement;
+  attributes: OuiListboxAttributes;
+  autocomplete: OuiListboxAutoComplete;
+  callbacks: OuiListboxCallbacks;
+  content: HTMLDivElement;
+  disabled: boolean;
+  elements: Array<HTMLElement | undefined>;
+  filter: OuiListboxFilter;
+  footer?: OuiListboxFooter;
+  groups?: OuiListboxGroup[];
+  host: HTMLElement;
+  id: string;
+  internals: ElementInternals;
+  label: OuiListboxLabel;
+  list: HTMLUListElement;
+  listbox: boolean;
+  listeners: RemovableEventListener[];
+  localizations: OuiListboxLocalization<OuiListboxLocalizations>;
+  max?: number;
+  min?: number;
+  message: HTMLElement;
+  multiple: boolean;
+  name: string;
+  options: OuiListboxOptions;
+  readonly: boolean;
+  required: boolean;
+  select: HTMLSelectElement;
+  type: OuiListboxType;
+  values: OuiListboxValues;
+};
+type OuiListboxStates<State extends OuiListboxState = OuiListboxState> = {
+  map: WeakMap<HTMLElement, State>;
+  set: Set<State>;
+};
+type OuiListboxType = 'autocomplete' | 'select';
+type OuiListboxValues = {
+  current: string[];
+  initial: string[];
+  label: HTMLElement;
+};
+//#endregion
+export { OuiListboxGroup as a, OuiListboxPreview as c, OuiListboxType as d, OuiListboxCallbacks as i, OuiListboxState as l, OuiListboxAutoComplete as n, OuiListboxLocalizations as o, OuiListboxAutoCompleteType as r, OuiListboxOptions as s, OuiListboxAttributes as t, OuiListboxStates as u };

package/dist/js/misc.listbox-BI-XsTOf.mjs

@@ -0,0 +1,197 @@
+import { getLocalizations, updateLocalizations } from "./l10n.mjs";
+import { b as updateListboxValueLabel, c as createListboxContent, n as filterListbox, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-BWd0PCy7.mjs";
+import { initializeListboxState } from "./internal/listbox/listbox.state.mjs";
+import { getBooleanAriaValue } from "./internal/misc.mjs";
+import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
+import { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME } from "./listbox/constants.listbox.mjs";
+import { on } from "@oscarpalmer/toretto/event";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { getData } from "@oscarpalmer/toretto/data";
+import { noop } from "@oscarpalmer/atoms/function";
+//#region src/js/listbox/event.listbox.ts
+function onListboxClick(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listboxStates.map.get(listbox);
+	if (listbox == null || state == null) return;
+	const option = findAncestor(event, LISTBOX_SELECTORS.option);
+	if (option == null) return;
+	if (state.disabled) state.filter.element.focus();
+	else if (state.readonly) updateListboxPreview("none", state, option, false);
+	else toggleListboxOption(state, option);
+}
+function onListboxEnter(state) {
+	if (!state.disabled && !state.readonly) toggleListboxOption(state, state.active);
+}
+function onListboxFilter(preview, state, _, active) {
+	updateListboxPreview(preview, state, active);
+}
+function onListboxInput(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listboxStates.map.get(listbox);
+	if (state?.filter.element === event.target) filterListbox(event.inputType, state);
+}
+function onListboxKeydown(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listboxStates.map.get(listbox);
+	if (state?.filter.element === event.target) processListboxKeydown(event, state);
+}
+function onListboxNavigation(preview, state, active) {
+	if (state.multiple || state.readonly) updateListboxPreview(preview, state, active);
+	else applyListboxSelection({
+		state,
+		option: active,
+		added: true,
+		selected: active == null ? [] : [active]
+	});
+}
+function onListboxToggle(state) {
+	state.filter.element.focus();
+}
+on(document, "click", onListboxClick);
+on(document, "input", onListboxInput);
+on(document, "keydown", onListboxKeydown, { passive: false });
+//#endregion
+//#region src/js/listbox/state.listbox.ts
+function createListboxState(element, internals) {
+	const select = element.querySelector("select");
+	if (select == null) throw new Error(LISTBOX_MESSAGES.select);
+	const label = element.querySelector(`label[for="${select.id}"]`);
+	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 = {
+		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);
+}
+function onAttachListbox(state) {
+	const { content, select } = state;
+	select.hidden = true;
+	select.insertAdjacentElement("afterend", content);
+	select.remove();
+}
+function onDetachListbox(state) {
+	const { content, select } = state;
+	content.insertAdjacentElement("beforebegin", select);
+	content.remove();
+	select.hidden = false;
+}
+const listboxAutoComplete = {
+	both: false,
+	inline: false,
+	list: false,
+	none: true
+};
+const listboxCallbacks = {
+	data: {
+		onApply: noop,
+		onFilter: onListboxFilter,
+		onForm: noop,
+		onPreview: noop,
+		onToggle: onListboxToggle
+	},
+	keydown: {
+		onEnter: onListboxEnter,
+		onNavigation: onListboxNavigation,
+		onToggle: onListboxToggle
+	}
+};
+const listboxLocalizations = getLocalizations({
+	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`
+});
+const listboxStates = {
+	map: /* @__PURE__ */ new WeakMap(),
+	set: /* @__PURE__ */ new Set()
+};
+//#endregion
+//#region src/js/listbox/misc.listbox.ts
+function getListboxId() {
+	index += 1;
+	return `oui_listbox_${index}`;
+}
+function setListboxLocalizations(first, second) {
+	updateListboxLocalizations(listboxLocalizations, listboxLocalizations.values, first, second);
+}
+function updateListboxLocalizations(instance, destination, first, second) {
+	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
+		for (const state of listboxStates.set) {
+			updateListboxMessage(state);
+			updateListboxValueLabel(state);
+		}
+	});
+}
+let index = 0;
+//#endregion
+export { listboxLocalizations as a, onDetachListbox as c, onListboxNavigation as d, onListboxToggle as f, createListboxState as i, onListboxEnter as l, setListboxLocalizations as n, listboxStates as o, updateListboxLocalizations as r, onAttachListbox as s, getListboxId as t, onListboxFilter as u };

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

@@ -0,0 +1,20 @@
+import { t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
+import { o as OuiListboxLocalizations } from "./listbox.model-CRReGOmu.mjs";
+//#region src/js/listbox/misc.listbox.d.ts
+declare function getListboxId(): string;
+/**
+ * Set listbox localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+declare function setListboxLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
+/**
+ * Set listbox localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+declare function setListboxLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
+declare function updateListboxLocalizations(instance: OuiLocalizations<OuiListboxLocalizations>, destination: Record<string, Partial<OuiListboxLocalizations>>, first: string | Record<string, Partial<OuiListboxLocalizations>>, second?: Partial<OuiListboxLocalizations>): void;
+//#endregion
+export { setListboxLocalizations as n, updateListboxLocalizations as r, getListboxId as t };

package/dist/js/sortable/sortable.embedded.mjs

@@ -98,8 +98,10 @@ function onEnd(event, globals, item, reset) {
 	};
 	const target = getElementFromPosition(position)[0];
 	let element = findAncestor(target, SELECTOR_ITEM);
-	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) if (getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
-	else element = element.nextElementSibling;
+	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) {
+		if (getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
+		else element = element.nextElementSibling;
+	}
 	let insert = "insert";
 	let toInstance;
 	let toState;