@oscarpalmer/oui 0.39.0 → 0.41.0

package/dist/js/menu.mjs

@@ -1,172 +0,0 @@
-import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/floatable.embedded.mjs";
-import { attributable } from "./internal/attributable.mjs";
-import { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
-import { setAria, setRole } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
-import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-//#region src/js/menu.ts
-var OuiMenu = class {
-	content;
-	element;
-	floatable;
-	navigable;
-	toggle;
-	get open() {
-		return this.floatable.open;
-	}
-	constructor(element, navigable) {
-		this.element = element;
-		this.navigable = navigable;
-		this.content = navigable.element;
-		this.toggle = element.querySelector(SELECTOR_MENU_TOGGLE);
-		this.floatable = createEmbeddedFloatable(this.toggle, this.content, {
-			attribute: ATTRIBUTE_MENU_POSITION,
-			position: findAncestor(element.parentElement, SELECTOR_MENU_CONTENT) == null ? "below-start" : "end-top",
-			reusable: false
-		});
-		this.navigable.listeners.push(getOnBeforeToggleListener(this.content), on(this.content, "click", (event) => {
-			event.stopPropagation();
-			if (findAncestor(event, SELECTOR_MENU_TOGGLE) != null) return;
-			const elements = document.querySelectorAll(SELECTOR_MENU_CONTENT);
-			for (const element of elements) menus.get(element)?.floatable.hide();
-			const menu = menus.get(elements[0]);
-			if (menu != null && event.pointerId === -1) updateNavigableFocus(menu.navigable, true);
-		}), on(this.content, "toggle", (event) => {
-			const expanded = event.newState === "open";
-			if (expanded) {
-				this.floatable?.update();
-				updateNavigableFocus(this.navigable, true);
-			}
-			setAria(this.toggle, "expanded", expanded);
-		}));
-		this.floatable.update();
-		initializeMenu(this);
-		updateNavigableFocus(this.navigable, false);
-	}
-	destroy() {
-		this.floatable.destroy();
-		this.navigable.destroy();
-		this.floatable = void 0;
-		this.navigable = void 0;
-	}
-};
-var OuiMenubar = class {
-	element;
-	navigable;
-	constructor(element, navigable) {
-		this.element = element;
-		this.navigable = navigable;
-		updateNavigableFocus(this.navigable, false);
-	}
-	destroy() {
-		this.navigable.destroy();
-		this.navigable = void 0;
-	}
-};
-function addInstance(instances, ctor, element, content, options) {
-	if (!instances.has(content)) instances.set(content, new ctor(element, getNavigable(content, {
-		...options,
-		onDeactivate,
-		onPreventNavigation,
-		onShouldActivate,
-		onShouldDeactivate
-	})));
-}
-function addMenu(element) {
-	const content = element.querySelector(SELECTOR_MENU_CONTENT);
-	const toggle = element.querySelector(SELECTOR_MENU_TOGGLE);
-	if (content != null && toggle != null) addInstance(menus, OuiMenu, element, content, {
-		selector: SELECTOR_MENU_ITEM,
-		vertical: true
-	});
-}
-function addMenubar(element) {
-	addInstance(menubars, OuiMenubar, element, element, {
-		role: "menubar",
-		selector: SELECTOR_MENUBAR_ITEM,
-		vertical: false
-	});
-}
-function getId(element, value) {
-	let { id } = element;
-	if (id == null || id.trim().length === 0) {
-		id = value == null ? `oui_menu_${++index}` : `${value}_toggle`;
-		element.id = id;
-	}
-	return id;
-}
-function initializeMenu(menu) {
-	const id = getId(menu.content);
-	setAttribute(menu.toggle, "popovertarget", id);
-	setAria(menu.toggle, {
-		controls: id,
-		expanded: "false",
-		haspopup: "menu"
-	});
-	setAttributes(menu.content, {
-		popover: "",
-		tabindex: "-1"
-	});
-	setRole(menu.content, "menu");
-}
-function onDeactivate(_, navigable) {
-	const menu = menus.get(navigable.element);
-	if (menu == null) return;
-	menu.floatable.hide();
-	const element = findAncestor(menu.element.parentElement, SELECTORS);
-	if (element == null) return;
-	const instance = menubars.get(element) ?? menus.get(element);
-	if (instance != null) updateNavigableFocus(instance.navigable, true);
-}
-function onPreventNavigation(_, navigable) {
-	const instance = menubars.get(navigable.element) ?? menus.get(navigable.element);
-	return instance == null ? false : findAncestor(instance.element.parentElement, SELECTORS) != null;
-}
-function onShouldActivate(event, navigable) {
-	let activate = false;
-	if (menubars.has(navigable.element)) activate = navigable.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : NAVIGABLE_KEYS_HORIZONTAL.has(event.key);
-	else if (menus.has(navigable.element)) activate = navigable.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : event.key === "ArrowRight";
-	if (activate) {
-		const target = event.target instanceof HTMLElement && event.target.matches(SELECTOR_MENU_TOGGLE) ? event.target : void 0;
-		if (target == null) activate = false;
-		else target.click();
-	}
-	return activate;
-}
-function onShouldDeactivate(event, navigable) {
-	if (menubars.has(navigable.element)) return;
-	const menu = menus.get(navigable.element);
-	if (menu == null) return;
-	const horizontal = navigable.orientation === "horizontal";
-	const altKey = horizontal ? "ArrowDown" : "ArrowRight";
-	const baseKey = horizontal ? "ArrowUp" : "ArrowLeft";
-	if (event.key === baseKey) return findAncestor(menu.element.parentElement, SELECTOR_MENU_CONTENT) != null;
-	if (event.key === altKey && event.target instanceof HTMLElement && !event.target.hasAttribute("popovertarget")) return false;
-}
-function removeInstance(instances, element) {
-	instances.get(element)?.destroy();
-	instances.delete(element);
-}
-function removeMenu(element) {
-	removeInstance(menus, element);
-}
-function removeMenubar(element) {
-	removeInstance(menubars, element);
-}
-const ATTRIBUTE_MENU = "oui-menu";
-const ATTRIBUTE_MENU_POSITION = "oui-menu-position";
-const ATTRIBUTE_MENUBAR = "oui-menubar";
-const SELECTOR_MENUBAR = `[${ATTRIBUTE_MENUBAR}]`;
-const SELECTOR_MENUBAR_ITEM = `:scope > [${ATTRIBUTE_MENUBAR}-item], :scope > * > [${ATTRIBUTE_MENUBAR}-item]`;
-const SELECTOR_MENU_CONTENT = `[${ATTRIBUTE_MENU}-content]`;
-const SELECTOR_MENU_ITEM = `:scope > [${ATTRIBUTE_MENU}-item], :scope > * > [${ATTRIBUTE_MENU}-item]`;
-const SELECTOR_MENU_TOGGLE = `[${ATTRIBUTE_MENU}-toggle]`;
-const SELECTORS = `${SELECTOR_MENUBAR}, ${SELECTOR_MENU_CONTENT}`;
-const menubars = /* @__PURE__ */ new WeakMap();
-const menus = /* @__PURE__ */ new WeakMap();
-let index = 0;
-attributable(ATTRIBUTE_MENU, addMenu, removeMenu);
-attributable(ATTRIBUTE_MENUBAR, addMenubar, removeMenubar);
-//#endregion
-export {};

package/dist/js/misc.listbox-DKB-j0UK.mjs

@@ -1,196 +0,0 @@
-import { getLocalizations, updateLocalizations } from "./l10n.mjs";
-import { getBooleanAriaValue } from "./internal/misc.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-DQ7-x2uY.mjs";
-import { initializeListboxState } from "./internal/listbox/listbox.state.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 { setAttributes } from "@oscarpalmer/toretto/attribute";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { noop } from "@oscarpalmer/atoms/function";
-import { getData } from "@oscarpalmer/toretto/data";
-//#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;
-	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-mZMuYOxg.d.mts

@@ -1,20 +0,0 @@
-import { t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
-import { o as OuiListboxLocalizations } from "./listbox.model-BHPA7GM4.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/popover.d.mts

@@ -1,38 +0,0 @@
-import { r as OuiFloatable } from "./floatable.embedded-DQYkXt8X.mjs";
-import { i as OuiFocusTrap } from "./focus-trap.embedded-CjyFQYow.mjs";
-import { RemovableEventListener } from "@oscarpalmer/toretto/models";
-//#region src/js/popover.d.ts
-declare class OuiPopover {
-  #private;
-  /**
-   * Is the popover open?
-   */
-  get open(): boolean;
-  set open(value: boolean);
-  constructor(state: OuiPopoverState);
-  /**
-   * Closes the popover
-   */
-  hide(): void;
-  /**
-   * Opens the popover
-   */
-  show(): void;
-}
-type OuiPopoverState = {
-  anchor: HTMLElement;
-  content: HTMLElement;
-  floatable: OuiFloatable;
-  focusTrap?: OuiFocusTrap;
-  listeners: RemovableEventListener[];
-  popover: OuiPopover;
-};
-/**
- * Get the _OuiPopover_ for an element
- *
- * @param element Element to get _OuiPopover_ for
- * @returns _OuiPopover_ instance
- */
-declare function getPopover(element: HTMLElement): OuiPopover | undefined;
-//#endregion
-export { type OuiPopover, getPopover };

package/dist/js/resizable.embedded-dvhdfQgt.d.mts

@@ -1,34 +0,0 @@
-import { StyleToggler } from "@oscarpalmer/toretto/style";
-//#region src/js/resizable/resizable.embedded.d.ts
-type CreateOuiResizableOptions = {
-  maximumHeight?: number;
-  maximumWidth?: number;
-  minimumHeight?: number;
-  minimumWidth?: number;
-};
-declare class OuiResizable {
-  #private;
-  constructor(state: OuiResizableState);
-  destroy(): void;
-  set(): void;
-  reset(): void;
-}
-type OuiResizableState = {
-  element: HTMLElement;
-  handle: HTMLElement;
-  height: number;
-  options: Required<CreateOuiResizableOptions>;
-  styles: StyleToggler;
-  width: number;
-};
-/**
- * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
- *
- * @param element Element to make resizable
- * @returns _OuiResizable_ instance
- */
-declare function createResizable(element: HTMLElement, options?: CreateOuiResizableOptions): OuiResizable;
-declare const RESIZABLE_ATTRIBUTE = "oui-resizable";
-declare const RESIZABLE_ATTRIBUTE_HANDLE: string;
-//#endregion
-export { createResizable as a, RESIZABLE_ATTRIBUTE_HANDLE as i, OuiResizable as n, RESIZABLE_ATTRIBUTE as r, CreateOuiResizableOptions as t };

package/dist/js/toolbar.mjs

@@ -1,31 +0,0 @@
-import { attributable } from "./internal/attributable.mjs";
-import { getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
-//#region src/js/toolbar.ts
-var OuiToolbar = class {
-	#navigable;
-	constructor(navigable) {
-		this.#navigable = navigable;
-		updateNavigableFocus(this.#navigable, false);
-	}
-	destroy() {
-		this.#navigable.destroy();
-		this.#navigable = void 0;
-	}
-};
-function addToolbar(element) {
-	if (!instances.has(element)) instances.set(element, new OuiToolbar(getNavigable(element, {
-		role: "toolbar",
-		selector: SELECTOR,
-		vertical: false
-	})));
-}
-function removeToolbar(element) {
-	instances.get(element)?.destroy();
-	instances.delete(element);
-}
-const ATTRIBUTE = "oui-toolbar";
-const SELECTOR = `[${ATTRIBUTE}-item]`;
-const instances = /* @__PURE__ */ new WeakMap();
-attributable(ATTRIBUTE, addToolbar, removeToolbar);
-//#endregion
-export {};

package/dist/js/tooltip.d.mts

@@ -1,45 +0,0 @@
-import { r as OuiFloatable } from "./floatable.embedded-DQYkXt8X.mjs";
-//#region src/js/tooltip.d.ts
-declare class OuiTooltip {
-  #private;
-  /**
-   * Is the tooltip open?
-   */
-  get open(): boolean;
-  /**
-   * Open or close the tooltip
-   */
-  set open(value: boolean);
-  constructor(state: OuiTooltipState);
-  /**
-   * Closes the tooltip
-   */
-  hide(): void;
-  /**
-   * Opens the tooltip
-   */
-  show(): void;
-}
-type OuiTooltipState = {
-  anchor: HTMLElement;
-  elements: HTMLElement[];
-  floatable: OuiFloatable;
-  timer?: number;
-  tooltip: OuiTooltip;
-};
-/**
- * Get the _OuiTooltip_ for an element
- *
- * @param element Element to get _OuiTooltip_ for
- * @returns _OuiTooltip_ instance
- */
-declare function getTooltip(element: HTMLElement): OuiTooltip | undefined;
-/**
- * Set the delay before showing the tooltip, in milliseconds
- *
- * _(Default delay is half a second, or 500 milliseconds)_
- * @param value Delay in milliseconds
- */
-declare function setTooltipDelay(value: number): void;
-//#endregion
-export { type OuiTooltip, getTooltip, setTooltipDelay };