@oscarpalmer/oui 0.39.0 → 0.41.0

package/dist/js/option-list.data-CgMyUwPc.mjs

@@ -0,0 +1,441 @@
+import { optionListScrollOptions } from "./internal/option-list/option-list.constants.mjs";
+import { updateOptionListForm, updateOptionListValidity } from "./internal/option-list/option-list.form.mjs";
+import { setAria } from "@oscarpalmer/toretto/aria";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch } from "@oscarpalmer/toretto/event";
+import { filter } from "@oscarpalmer/atoms/array/filter";
+import { createElement } from "@oscarpalmer/toretto/create";
+import { getString } from "@oscarpalmer/atoms/string";
+import { getData } from "@oscarpalmer/toretto/data";
+//#region src/js/internal/option-list/option-list.misc.ts
+function generateOptionListIds(prefix, select) {
+	const elements = [...select.children].flatMap((child) => child instanceof HTMLOptGroupElement ? [child, ...filter([...child.children], (groupChild) => groupChild instanceof HTMLOptionElement)] : child instanceof HTMLOptionElement ? [child] : []);
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		if (element.id === "") element.id = `${prefix}${element instanceof HTMLOptGroupElement ? "_group_" : "_option_"}${index}`;
+	}
+}
+function getOptionListVisibleOptions(state) {
+	return state.component.options.all.filter((option) => !option.hidden);
+}
+function setOptionListDisabled(state, value) {
+	state.component.filter.element.readOnly = state.component.readonly || value;
+	setProperties("disabled", state, value);
+}
+function setOptionListFilter(state, value) {
+	if (typeof value !== "string") return;
+	const { filter } = state.component;
+	const type = value.length < filter.element.value.length ? "deleteContentBackward" : "insertText";
+	filter.element.value = value;
+	filterOptionList(type, state);
+}
+function setOptionListLimit(type, state, value) {
+	const { component } = state;
+	let actual = value;
+	if (typeof actual === "string") actual = Number.parseInt(actual, 10);
+	if (typeof actual === "number" && !Number.isNaN(actual) && actual >= 0 ? actual !== component[type] : actual == null) {
+		component[type] = actual;
+		setAttribute(component.host, type, actual);
+		updateOptionListValidity(state);
+	}
+}
+function setOptionListMultiple(element, value) {
+	if (value) element.setAttribute("multiple", "");
+	else element.removeAttribute("multiple");
+}
+function setProperties(key, state, value) {
+	const { component } = state;
+	const { elements } = component;
+	component[key] = value;
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		if (element == null) continue;
+		setAria(element, key, key !== "readonly" || !(element instanceof HTMLButtonElement) ? value : void 0);
+	}
+}
+function setOptionListReadonly(state, value) {
+	const { disabled, filter } = state.component;
+	filter.element.readOnly = disabled || value;
+	setProperties("readonly", state, value);
+}
+function setOptionListRequired(state, value) {
+	setProperties("required", state, value);
+	updateOptionListValidity(state);
+}
+//#endregion
+//#region src/js/internal/option-list/option-list.dom.ts
+function createOptionListContent(parameters) {
+	const element = createElement("div", { attribute: { [parameters.attributes.content]: "" } });
+	const filter = createOptionListFilter(parameters);
+	const list = createOptionListList(parameters);
+	const message = createOptionListMessage(parameters.attributes.message);
+	const value = createOptionListValueLabel(parameters.id);
+	if (filter != null) element.append(filter.container);
+	element.append(list.element, message, value);
+	return {
+		element,
+		filter,
+		list,
+		message,
+		value
+	};
+}
+function createOptionListFilter(parameters) {
+	if (parameters.type === "autocomplete") return;
+	const container = createElement("div", { attribute: { [parameters.attributes.filter]: "" } });
+	const element = createOptionListInput(parameters, "");
+	setAttribute(element, parameters.attributes.input, "");
+	container.append(element);
+	return {
+		container,
+		element
+	};
+}
+function createOptionListGroup(parameters) {
+	const { group, groupOptions, selected, type } = parameters;
+	const element = createElement("li", {
+		aria: { label: group.label },
+		property: { role: "group" }
+	});
+	const list = createElement("ul", { property: { role: "none" } });
+	const header = createOptionListHeader(parameters, group);
+	element.append(header, list);
+	return {
+		element,
+		header,
+		options: createOptionListOptions({
+			list,
+			selected,
+			type,
+			group: header.id,
+			options: groupOptions,
+			original: parameters.original
+		})
+	};
+}
+function createOptionListHeader(parameters, group) {
+	return createElement("div", {
+		aria: { hidden: true },
+		attribute: { [parameters.original.attributes.header]: "" },
+		property: {
+			id: group.id,
+			textContent: group.label
+		}
+	});
+}
+function createOptionListInput(parameters, value) {
+	const { autocomplete, id, label, listbox, type } = parameters;
+	const isAutocomplete = type === "autocomplete";
+	const input = createElement("input", {
+		aria: {
+			autocomplete: autocomplete.value,
+			controls: `${id}_list`,
+			haspopup: isAutocomplete ? "listbox" : void 0,
+			labelledby: label.id
+		},
+		attribute: {
+			autocorrect: "off",
+			autocomplete: "off",
+			form: "",
+			inputmode: "text",
+			spellcheck: "false"
+		},
+		property: {
+			id,
+			value,
+			role: isAutocomplete || listbox ? "combobox" : "searchbox",
+			type: "text"
+		}
+	});
+	if (isAutocomplete || listbox) setAria(input, "expanded", listbox);
+	return input;
+}
+function createOptionListList(parameters) {
+	const { attributes, id, label, multiple, select, type } = parameters;
+	const element = createElement("ul", {
+		aria: {
+			labelledby: label.id,
+			multiselectable: multiple
+		},
+		attribute: {
+			[attributes.list]: "",
+			tabindex: -1
+		},
+		property: {
+			id: `${id}_list`,
+			role: "listbox"
+		}
+	});
+	const children = [...select.children];
+	const childrenLength = children.length;
+	const options = [];
+	const selected = [];
+	let groups;
+	for (let childIndex = 0; childIndex < childrenLength; childIndex += 1) {
+		const child = children[childIndex];
+		if (child instanceof HTMLOptionElement) {
+			const option = createOptionListOption({
+				type,
+				option: child,
+				original: parameters,
+				index: childIndex
+			});
+			element.append(option);
+			options.push(option);
+			if (child.selected) selected.push(option);
+			continue;
+		}
+		if (!(child instanceof HTMLOptGroupElement)) continue;
+		const group = createOptionListGroup({
+			selected,
+			type,
+			group: child,
+			groupOptions: [...child.children],
+			original: parameters
+		});
+		groups ??= [];
+		element.append(group.element);
+		groups.push(group);
+		options.push(...group.options);
+	}
+	return {
+		element,
+		groups,
+		options: {
+			selected,
+			all: options
+		}
+	};
+}
+function createOptionListMessage(attribute) {
+	return createElement("div", {
+		aria: { live: "polite" },
+		attribute: { [attribute]: "" },
+		property: {
+			hidden: true,
+			role: "status"
+		}
+	});
+}
+function createOptionListOption(parameters) {
+	const { group, option, original } = parameters;
+	return createElement("li", {
+		aria: { selected: (parameters.type === "select" || !original.autocomplete.none) && option.selected },
+		attribute: { [original.attributes.option]: "" },
+		data: {
+			group,
+			value: option.value
+		},
+		property: {
+			id: option.id,
+			role: "option",
+			textContent: option.textContent
+		}
+	});
+}
+function createOptionListOptions(parameters) {
+	const { group, list, options, original, selected, type } = parameters;
+	const items = [];
+	for (let index = 0; index < options.length; index += 1) {
+		const option = options[index];
+		const item = createOptionListOption({
+			group,
+			index,
+			option,
+			original,
+			type
+		});
+		items.push(item);
+		if (option.selected) selected.push(item);
+		list.append(item);
+	}
+	return items;
+}
+function createOptionListValueLabel(id) {
+	return createElement("span", { property: {
+		hidden: true,
+		id: `${id}_value`
+	} });
+}
+function updateOptionListMessage(state) {
+	const { attributes, host, localizations, message } = state.component;
+	const visible = getOptionListVisibleOptions(state).length;
+	setAttribute(message, attributes.hidden, visible > 0 ? "" : void 0);
+	let parameters = [];
+	let key;
+	if (visible === 0) key = "empty";
+	else {
+		key = "results";
+		parameters = [visible];
+	}
+	message.textContent = localizations.localize(key, {
+		arguments: parameters,
+		element: host
+	});
+	message.hidden = false;
+}
+function updateOptionListPreview(preview, state, active, scroll) {
+	const { attributes, callbacks, content, filter, options } = state.component;
+	const { length } = options.all;
+	for (let index = 0; index < length; index += 1) {
+		const option = options.all[index];
+		setAttribute(option, attributes.active, option === active ? "" : void 0);
+	}
+	state.component.active = active;
+	setAria(filter.element, "activedescendant", content.checkVisibility() ? active?.id : void 0);
+	if (scroll ?? true) active?.scrollIntoView(optionListScrollOptions);
+	if (preview !== "none") callbacks.data.onPreview(preview, state, active);
+}
+function updateOptionListValueLabel(state) {
+	const { autocomplete, filter, listbox, localizations, host, options, multiple, values } = state.component;
+	let label;
+	if (multiple) label = localizations.localize("selected", {
+		arguments: [options.selected.length],
+		element: host
+	});
+	else label = autocomplete.none && !listbox ? filter.element.value : options.selected[0]?.textContent ?? "";
+	values.label.textContent = label;
+}
+//#endregion
+//#region src/js/internal/option-list/option-list.data.ts
+function applyOptionListSelection(parameters) {
+	const { added, emit, option, scroll, selected, state } = parameters;
+	const { component } = state;
+	const { autocomplete, callbacks, filter, listbox, options, type } = component;
+	const { length } = options.all;
+	for (let index = 0; index < length; index += 1) {
+		const option = options.all[index];
+		setAria(option, "selected", (type === "select" || !autocomplete.none) && (selected ?? options.selected).includes(option));
+	}
+	const values = parameters.values ?? (autocomplete.none && !listbox ? [filter.element.value] : (selected ?? options.selected).map((option) => getData(option, "value", false) ?? ""));
+	if (values.length === 0) values.push("");
+	if (selected != null) options.selected = selected;
+	if (!(values.length === component.values.current.length ? values.some((value) => !component.values.current.includes(value)) : true)) return;
+	updateOptionListForm(state, values, emit);
+	updateOptionListMessage(state);
+	updateOptionListPreview("set", state, option, scroll);
+	updateOptionListValueLabel(state);
+	callbacks.data.onApply(state, option, values, added, selected, emit);
+}
+function filterOptionList(type, state) {
+	const { callbacks, disabled, filter, host, readonly } = state.component;
+	if (disabled || readonly) return;
+	const update = filter.element.value !== filter.value;
+	const option = filterOptionListOptions(state);
+	let preview;
+	if (type.includes("delete")) preview = "none";
+	else if (type.includes("insert")) preview = "typed";
+	if (preview != null) callbacks.data.onFilter(preview, state, update, option);
+	if (update) {
+		filter.value = filter.element.value;
+		dispatch(host, "input");
+	}
+}
+function filterOptionListOption(state, value, textContent) {
+	const { options } = state.component;
+	const filterTextContent = textContent ?? false;
+	const filter = getString(value).toLocaleLowerCase();
+	filterOptionListOptions(state);
+	const { length } = options.all;
+	let match;
+	for (let index = 0; index < length; index += 1) {
+		const option = options.all[index];
+		if ((filterTextContent ? option.textContent : getData(option, "value", false) ?? "").toLocaleLowerCase() === filter) {
+			match = option;
+			break;
+		}
+	}
+	return match;
+}
+function filterOptionListOptions(state) {
+	function filterOptions(options) {
+		const { length } = options;
+		let count = 0;
+		for (let index = 0; index < length; index += 1) {
+			const option = options[index];
+			option.hidden = (type === "select" || !autocomplete.none) && !option.textContent.toLocaleLowerCase().includes(value);
+			if (!option.hidden) {
+				count += 1;
+				visible.push(option);
+			}
+		}
+		return count === 0;
+	}
+	const { active, attributes, autocomplete, filter, groups, list, options, type } = state.component;
+	const value = filter.element.value.toLocaleLowerCase();
+	const visible = [];
+	if (groups == null) filterOptions(options.all);
+	else {
+		const groupsLength = groups.length;
+		for (let groupIndex = 0; groupIndex < groupsLength; groupIndex += 1) {
+			const { element, options } = groups[groupIndex];
+			element.hidden = filterOptions(options);
+		}
+	}
+	setAttribute(list, attributes.empty, visible.length === 0 ? "" : void 0);
+	updateOptionListMessage(state);
+	return active != null && visible.includes(active) ? active : visible[0];
+}
+function setOptionListValue(state, value, emit) {
+	const { autocomplete, listbox } = state.component;
+	if (autocomplete.none && !listbox) {
+		setOptionListFilter(state, getString(value));
+		return;
+	}
+	if (filterOptionListOption(state, value) != null) setOptionListValues(state, [value], emit);
+}
+function setOptionListValues(state, value, emit) {
+	if (!Array.isArray(value)) return;
+	const { autocomplete, listbox, multiple, options } = state.component;
+	const values = (multiple ? value : value.slice(0, 1)).map((value) => getString(value).toLocaleLowerCase());
+	if (values.length === 0) values.push("");
+	if (autocomplete.none && !listbox) {
+		setOptionListValue(state, values[0], emit);
+		return;
+	}
+	const { length } = options.all;
+	const selected = [];
+	for (let index = 0; index < length; index += 1) {
+		const option = options.all[index];
+		if (values.includes(getData(option, "value", false)?.toLocaleLowerCase() ?? "")) selected.push(option);
+	}
+	applyOptionListSelection({
+		emit,
+		selected,
+		state,
+		added: true,
+		option: selected[0] ?? options.all[0],
+		values: autocomplete.none && !listbox ? values : void 0
+	});
+}
+function toggleOptionListOption(state, option) {
+	const { autocomplete, callbacks, listbox, multiple, options } = state.component;
+	if (option == null || !multiple && options.selected.includes(option)) {
+		callbacks.data.onToggle(state);
+		return;
+	}
+	const selected = options.selected.slice();
+	let added = true;
+	if (multiple) {
+		const index = selected.indexOf(option);
+		if (index === -1) selected.push(option);
+		else {
+			added = false;
+			selected.splice(index, 1);
+		}
+	} else selected.splice(0, selected.length, option);
+	const values = autocomplete.none && !listbox && option != null ? [option.textContent] : void 0;
+	applyOptionListSelection({
+		added,
+		option,
+		selected,
+		state,
+		values,
+		scroll: false
+	});
+	callbacks.data.onToggle(state);
+}
+//#endregion
+export { setOptionListDisabled as C, setOptionListReadonly as D, setOptionListMultiple as E, setOptionListRequired as O, getOptionListVisibleOptions as S, setOptionListLimit as T, createOptionListValueLabel as _, setOptionListValue as a, updateOptionListValueLabel as b, createOptionListContent as c, createOptionListHeader as d, createOptionListInput as f, createOptionListOptions as g, createOptionListOption as h, filterOptionListOptions as i, createOptionListFilter as l, createOptionListMessage as m, filterOptionList as n, setOptionListValues as o, createOptionListList as p, filterOptionListOption as r, toggleOptionListOption as s, applyOptionListSelection as t, createOptionListGroup as u, updateOptionListMessage as v, setOptionListFilter as w, generateOptionListIds as x, updateOptionListPreview as y };

package/dist/js/option-list.model-CCPUlPeX.d.mts

@@ -0,0 +1,169 @@
+import { _ as OuiLocalizationsValues, p as OuiLocalizations } from "./l10n.model-D1E1u35L.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+//#region src/js/internal/option-list/option-list.model.d.ts
+type CreateOptionListContent = {
+  element: HTMLDivElement;
+  filter?: CreateOptionListFilter;
+  list: CreateOptionListList;
+  message: HTMLDivElement;
+  value: HTMLSpanElement;
+};
+type CreateOptionListContentParameters = {
+  attributes: OptionListAttributes;
+  autocomplete: OptionListAutoComplete;
+  element: Element;
+  id: string;
+  label: HTMLLabelElement;
+  listbox: boolean;
+  multiple: boolean;
+  select: HTMLSelectElement;
+  type: OptionListType;
+};
+type CreateOptionListFilter = {
+  container: Element;
+  element: HTMLInputElement;
+};
+type CreateOptionListGroupParameters = {
+  group: HTMLOptGroupElement;
+  groupOptions: HTMLOptionElement[];
+  original: CreateOptionListContentParameters;
+  selected: Element[];
+  type: OptionListType;
+};
+type CreateOptionListList = {
+  element: HTMLUListElement;
+  groups?: OptionListGroup[];
+  options: OptionListOptions;
+};
+type CreateOptionListOptionParameters = {
+  group?: string;
+  index: number;
+  option: HTMLOptionElement;
+  original: CreateOptionListContentParameters;
+  type: OptionListType;
+};
+type CreateOptionListOptionsParameters = {
+  group?: string;
+  list: Element;
+  options: HTMLOptionElement[];
+  original: CreateOptionListContentParameters;
+  selected: Element[];
+  type: OptionListType;
+};
+type OptionListAttributes = {
+  active: string;
+  content: string;
+  empty: string;
+  filter: string;
+  group: string;
+  header: string;
+  hidden: string;
+  input: string;
+  list: string;
+  message: string;
+  option: string;
+};
+type OptionListAutoComplete = Record<OptionListAutoCompleteType, boolean> & {
+  value?: OptionListAutoCompleteType;
+};
+type OptionListAutoCompleteType = "both" | "inline" | "list" | "none";
+type OptionListCallbacks<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  data: OptionListCallbacksData<State, Localizations>;
+  keydown: OptionListCallbacksKeydown<State, Localizations>;
+};
+type OptionListCallbacksData<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  onApply: OptionListCallbacksDataOnApply<State, Localizations>;
+  onFilter: OptionListCallbacksDataOnFilter<State, Localizations>;
+  onForm: (state: OptionListState<State, Localizations>) => void;
+  onPreview: OptionListCallbacksDataOnPreview<State, Localizations>;
+  onToggle: (state: OptionListState<State, Localizations>) => void;
+};
+type OptionListCallbacksDataOnApply<State extends PlainObject, Localizations extends OuiLocalizationsValues> = (state: OptionListState<State, Localizations>, option: Element | undefined, values: string[], added: boolean, selected?: Element[], emit?: boolean) => void;
+type OptionListCallbacksDataOnFilter<State extends PlainObject, Localizations extends OuiLocalizationsValues> = (preview: OptionListPreview, state: OptionListState<State, Localizations>, update: boolean, active?: Element, emit?: boolean) => void;
+type OptionListCallbacksDataOnPreview<State extends PlainObject, Localizations extends OuiLocalizationsValues> = (preview: OptionListPreview, state: OptionListState<State, Localizations>, active?: Element) => void;
+type OptionListCallbacksKeydown<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  onActivation?: (state: OptionListState<State, Localizations>) => void;
+  onEnter?: (state: OptionListState<State, Localizations>) => void;
+  onEscape?: (state: OptionListState<State, Localizations>) => void;
+  onNavigation: OptionListCallbacksDataOnNavigation<State, Localizations>;
+  onSelection?: (state: OptionListState<State, Localizations>) => void;
+  onTab?: (state: OptionListState<State, Localizations>) => void;
+  onToggle?: (state: OptionListState<State, Localizations>) => void;
+  preventActivation?: (state: OptionListState<State, Localizations>) => boolean;
+  skipNavigation?: (state: OptionListState<State, Localizations>) => boolean;
+};
+type OptionListCallbacksDataOnNavigation<State extends PlainObject, Localizations extends OuiLocalizationsValues> = (preview: OptionListPreview, state: OptionListState<State, Localizations>, active?: HTMLElement) => void;
+type OptionListFilter = {
+  element: HTMLInputElement;
+  value: string;
+};
+type OptionListGroup = {
+  element: HTMLElement;
+  header: HTMLElement;
+  options: HTMLElement[];
+};
+type OptionListLabel = {
+  element: HTMLLabelElement;
+  id: string;
+};
+type OptionListLocalizationValues = {
+  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 OptionListOptions = {
+  all: HTMLElement[];
+  selected: HTMLElement[];
+};
+type OptionListPreview = "none" | "set" | "typed";
+type OptionListState<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  component: OptionListStateComponent<State, Localizations>;
+  form: OptionListStateForm;
+};
+type OptionListStateComponent<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  active?: HTMLElement;
+  attributes: OptionListAttributes;
+  autocomplete: OptionListAutoComplete;
+  callbacks: OptionListCallbacks<State, Localizations>;
+  content: HTMLDivElement;
+  disabled: boolean;
+  elements: Array<Element | undefined>;
+  filter: OptionListFilter;
+  groups?: OptionListGroup[];
+  host: Element;
+  id: string;
+  label: OptionListLabel;
+  list: HTMLUListElement;
+  listbox: boolean;
+  listeners: RemovableEventListener[];
+  localizations: OuiLocalizations<OptionListLocalizationValues & Localizations>;
+  max?: number;
+  min?: number;
+  message: HTMLElement;
+  multiple: boolean;
+  name: string;
+  options: OptionListOptions;
+  readonly: boolean;
+  required: boolean;
+  select: HTMLSelectElement;
+  type: OptionListType;
+  values: OptionListValues;
+} & State;
+type OptionListStateForm = {
+  internals: ElementInternals;
+  restored?: unknown[];
+};
+type OptionListType = "autocomplete" | "select";
+type OptionListValues = {
+  current: string[];
+  initial: string[];
+  label: Element;
+};
+//#endregion
+export { OptionListType as _, CreateOptionListList as a, OptionListAttributes as c, OptionListCallbacks as d, OptionListGroup as f, OptionListState as g, OptionListPreview as h, CreateOptionListGroupParameters as i, OptionListAutoComplete as l, OptionListOptions as m, CreateOptionListContentParameters as n, CreateOptionListOptionParameters as o, OptionListLocalizationValues as p, CreateOptionListFilter as r, CreateOptionListOptionsParameters as s, CreateOptionListContent as t, OptionListAutoCompleteType as u };

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

@@ -0,0 +1,12 @@
+import { n as OuiPopoverState, t as OuiPopover } from "../popover.model-DiLdz0Hc.mjs";
+//#region src/js/popover/index.d.ts
+declare function OuiPopover(this: OuiPopover, state: OuiPopoverState): void;
+/**
+ * Get the _OuiPopover_ for an element
+ *
+ * @param element Element to get _OuiPopover_ for
+ * @returns _OuiPopover_ instance
+ */
+export declare function getPopover(element: Element): OuiPopover | undefined;
+//#endregion
+export type { OuiPopover };