@vadem/ui 0.0.0-stage → 0.0.2

package/fesm2022/vadem-ui-menu.mjs

@@ -0,0 +1,657 @@
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, afterNextRender, booleanAttribute, inject, input, output, signal } from "@angular/core";
+import { vdUniqueId } from "@vadem/ui/field";
+import { VdTypeahead, vdListTarget } from "@vadem/ui/keyboard";
+import { DOCUMENT } from "@angular/common";
+import { vdTexts } from "@vadem/ui/locale";
+const ITEM = "[role=\"menuitem\"]";
+function isDisabled(el) {
+	return el.getAttribute("aria-disabled") === "true" || el.disabled;
+}
+var VdMenuController = class {
+	trigger;
+	menu;
+	options;
+	typeahead = new VdTypeahead();
+	returnFocus = false;
+	wasOpen = false;
+	constructor(trigger, menu, options) {
+		this.trigger = trigger;
+		this.menu = menu;
+		this.options = options;
+		trigger.addEventListener("pointerdown", this.onTriggerPointerDown);
+		trigger.addEventListener("click", this.onTriggerClick);
+		trigger.addEventListener("keydown", this.onTriggerKeydown);
+		menu.addEventListener("keydown", this.onMenuKeydown);
+		menu.addEventListener("click", this.onMenuClick);
+		menu.addEventListener("pointermove", this.onPointerMove);
+		menu.addEventListener("toggle", this.onToggle);
+	}
+	get isOpen() {
+		return this.menu.matches(":popover-open");
+	}
+	open(focus = "first") {
+		if (!this.isOpen) {
+			this.menu.showPopover({ source: this.trigger });
+			this.options.onOpenChange?.(true);
+		}
+		const items = this.enabledItems();
+		(focus === "first" ? items[0] : items[items.length - 1])?.focus();
+	}
+	close(returnFocus) {
+		this.returnFocus = returnFocus;
+		if (this.isOpen) this.menu.hidePopover();
+	}
+	destroy() {
+		this.trigger.removeEventListener("pointerdown", this.onTriggerPointerDown);
+		this.trigger.removeEventListener("click", this.onTriggerClick);
+		this.trigger.removeEventListener("keydown", this.onTriggerKeydown);
+		this.menu.removeEventListener("keydown", this.onMenuKeydown);
+		this.menu.removeEventListener("click", this.onMenuClick);
+		this.menu.removeEventListener("pointermove", this.onPointerMove);
+		this.menu.removeEventListener("toggle", this.onToggle);
+	}
+	enabledItems() {
+		return this.options.items().filter((i) => !isDisabled(i));
+	}
+	onTriggerPointerDown = () => {
+		this.wasOpen = this.isOpen;
+	};
+	onTriggerClick = (event) => {
+		if (this.wasOpen || this.isOpen) {
+			this.wasOpen = false;
+			this.close(false);
+			return;
+		}
+		this.open("first");
+		event.preventDefault();
+	};
+	onTriggerKeydown = (event) => {
+		const { key } = event;
+		if (key === "ArrowDown" || key === "Enter" || key === " ") {
+			event.preventDefault();
+			this.open("first");
+		} else if (key === "ArrowUp") {
+			event.preventDefault();
+			this.open("last");
+		}
+	};
+	onMenuKeydown = (event) => {
+		const items = this.options.items();
+		const current = items.indexOf(event.target);
+		const { key } = event;
+		if (key === "Escape") {
+			event.preventDefault();
+			this.close(true);
+			return;
+		}
+		if (key === "Tab") {
+			this.close(false);
+			return;
+		}
+		const target = vdListTarget(key, current, items.map(isDisabled), {
+			loop: true,
+			pageSize: 10
+		});
+		if (target !== null) {
+			event.preventDefault();
+			items[target]?.focus();
+			return;
+		}
+		if (VdTypeahead.accepts(event)) {
+			const idx = this.typeahead.match(key, items.map((i) => i.textContent?.trim() ?? ""), items.map(isDisabled), current);
+			if (idx !== null) items[idx]?.focus();
+		}
+	};
+	onMenuClick = (event) => {
+		const item = event.target.closest(ITEM);
+		if (!item || !this.menu.contains(item)) return;
+		if (isDisabled(item)) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return;
+		}
+		this.close(true);
+	};
+	onPointerMove = (event) => {
+		if (event.pointerType === "touch") return;
+		const item = event.target.closest(ITEM);
+		if (item && !isDisabled(item) && item !== this.menu.ownerDocument.activeElement) item.focus();
+	};
+	onToggle = (event) => {
+		if (event.newState !== "closed") return;
+		this.typeahead.reset();
+		this.options.onOpenChange?.(false);
+		if (this.returnFocus) (this.options.returnFocusTo?.() ?? this.trigger).focus();
+		this.returnFocus = false;
+	};
+};
+var VdMenu = class VdMenu {
+	id = vdUniqueId("vd-menu");
+	el = inject(ElementRef).nativeElement;
+	labelledBy = signal(null, ...ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []);
+	items() {
+		return Array.from(this.el.querySelectorAll("[role=\"menuitem\"]"));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdMenu,
+		isStandalone: true,
+		selector: "[vdMenu]",
+		host: {
+			attributes: {
+				"role": "menu",
+				"popover": "auto",
+				"tabindex": "-1"
+			},
+			properties: {
+				"id": "id",
+				"attr.aria-labelledby": "labelledBy()"
+			},
+			classAttribute: "vd-menu"
+		},
+		exportAs: ["vdMenu"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdMenu,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdMenu]",
+			exportAs: "vdMenu",
+			host: {
+				class: "vd-menu",
+				role: "menu",
+				popover: "auto",
+				tabindex: "-1",
+				"[id]": "id",
+				"[attr.aria-labelledby]": "labelledBy()"
+			}
+		}]
+	}]
+});
+var VdMenuTrigger = class VdMenuTrigger {
+	vdMenuTrigger = input.required(...ngDevMode ? [{ debugName: "vdMenuTrigger" }] : /* istanbul ignore next */ []);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	el = inject(ElementRef).nativeElement;
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			const menu = this.vdMenuTrigger();
+			if (!this.el.id) this.el.id = vdUniqueId("vd-menu-trigger");
+			menu.labelledBy.set(this.el.id);
+			const name = `--${menu.id}`;
+			this.el.style.setProperty("anchor-name", name);
+			menu.el.style.setProperty("position-anchor", name);
+			const controller = new VdMenuController(this.el, menu.el, {
+				items: () => menu.items(),
+				onOpenChange: (open) => this.open.set(open)
+			});
+			destroyRef.onDestroy(() => controller.destroy());
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdMenuTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdMenuTrigger,
+		isStandalone: true,
+		selector: "button[vdMenuTrigger]",
+		inputs: { vdMenuTrigger: {
+			classPropertyName: "vdMenuTrigger",
+			publicName: "vdMenuTrigger",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "aria-haspopup": "menu" },
+			properties: {
+				"attr.aria-expanded": "open()",
+				"attr.aria-controls": "vdMenuTrigger().id",
+				"attr.data-state": "open() ? \"open\" : \"closed\""
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdMenuTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[vdMenuTrigger]",
+			host: {
+				"aria-haspopup": "menu",
+				"[attr.aria-expanded]": "open()",
+				"[attr.aria-controls]": "vdMenuTrigger().id",
+				"[attr.data-state]": "open() ? \"open\" : \"closed\""
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { vdMenuTrigger: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "vdMenuTrigger",
+			required: true
+		}]
+	}] }
+});
+var VdMenuItem = class VdMenuItem {
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	isButton = inject(ElementRef).nativeElement.tagName === "BUTTON";
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdMenuItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdMenuItem,
+		isStandalone: true,
+		selector: "button[vdMenuItem], a[vdMenuItem]",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "menuitem",
+				"tabindex": "-1"
+			},
+			properties: {
+				"attr.type": "isButton ? \"button\" : null",
+				"attr.data-variant": "variant()",
+				"attr.aria-disabled": "disabled() || null"
+			},
+			classAttribute: "vd-menu__item"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdMenuItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[vdMenuItem], a[vdMenuItem]",
+			host: {
+				class: "vd-menu__item",
+				role: "menuitem",
+				tabindex: "-1",
+				"[attr.type]": "isButton ? \"button\" : null",
+				"[attr.data-variant]": "variant()",
+				"[attr.aria-disabled]": "disabled() || null"
+			}
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+var VdMenuSeparator = class VdMenuSeparator {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdMenuSeparator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdMenuSeparator,
+		isStandalone: true,
+		selector: "[vdMenuSeparator]",
+		host: {
+			attributes: { "role": "separator" },
+			classAttribute: "vd-menu__separator"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdMenuSeparator,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdMenuSeparator]",
+			host: {
+				class: "vd-menu__separator",
+				role: "separator"
+			}
+		}]
+	}]
+});
+var VdMenuLabel = class VdMenuLabel {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdMenuLabel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdMenuLabel,
+		isStandalone: true,
+		selector: "[vdMenuLabel]",
+		host: {
+			attributes: { "role": "presentation" },
+			classAttribute: "vd-menu__label"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdMenuLabel,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdMenuLabel]",
+			host: {
+				class: "vd-menu__label",
+				role: "presentation"
+			}
+		}]
+	}]
+});
+const VD_MENU = [
+	VdMenu,
+	VdMenuTrigger,
+	VdMenuItem,
+	VdMenuSeparator,
+	VdMenuLabel
+];
+const LONG_PRESS_MS = 500;
+const LONG_PRESS_SLOP = 10;
+const shared = /* @__PURE__ */ new WeakMap();
+function acquire(menu, doc) {
+	let entry = shared.get(menu.el);
+	if (!entry) {
+		const anchor = doc.createElement("span");
+		anchor.className = "vd-context-menu__anchor";
+		anchor.setAttribute("aria-hidden", "true");
+		const name = `--${vdUniqueId("vd-context-anchor")}`;
+		anchor.style.setProperty("anchor-name", name);
+		menu.el.style.setProperty("position-anchor", name);
+		(menu.el.parentElement ?? doc.body).appendChild(anchor);
+		const created = {
+			anchor,
+			opener: null,
+			users: 0,
+			controller: new VdMenuController(anchor, menu.el, {
+				items: () => menu.items(),
+				returnFocusTo: () => created.opener
+			})
+		};
+		entry = created;
+		shared.set(menu.el, entry);
+	}
+	entry.users++;
+	return entry;
+}
+function release(menu) {
+	const entry = shared.get(menu.el);
+	if (!entry || --entry.users > 0) return;
+	entry.controller.destroy();
+	entry.anchor.remove();
+	shared.delete(menu.el);
+}
+var VdContextMenu = class VdContextMenu {
+	vdContextMenu = input.required(...ngDevMode ? [{ debugName: "vdContextMenu" }] : /* istanbul ignore next */ []);
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	opened = output();
+	t = vdTexts("contextMenu", { label: this.label });
+	el = inject(ElementRef).nativeElement;
+	doc = inject(DOCUMENT);
+	entry = null;
+	pendingPointerOpen = null;
+	pressTimer;
+	constructor() {
+		inject(DestroyRef).onDestroy(() => {
+			clearTimeout(this.pressTimer);
+			this.cancelPointerOpen();
+			if (this.entry) release(this.vdContextMenu());
+		});
+	}
+	onContextMenu(event) {
+		if (event.shiftKey && event.button === 2) return;
+		event.preventDefault();
+		this.cancelPointerOpen();
+		const { clientX: x, clientY: y } = event;
+		const origin = event.target;
+		if (event.buttons & 2) {
+			this.pendingPointerOpen = (release) => {
+				if (release.button !== 2) return;
+				this.cancelPointerOpen();
+				if (origin.isConnected) this.openAt(x, y, origin);
+			};
+			this.doc.addEventListener("pointerup", this.pendingPointerOpen);
+			this.doc.addEventListener("pointercancel", this.cancelPointerOpen);
+		} else this.openAt(x, y, origin);
+	}
+	cancelPointerOpen = () => {
+		if (this.pendingPointerOpen) {
+			this.doc.removeEventListener("pointerup", this.pendingPointerOpen);
+			this.pendingPointerOpen = null;
+		}
+		this.doc.removeEventListener("pointercancel", this.cancelPointerOpen);
+	};
+	onKeydown(event) {
+		if (!(event.key === "ContextMenu" || event.shiftKey && event.key === "F10")) return;
+		event.preventDefault();
+		const target = event.target ?? this.el;
+		const rect = target.getBoundingClientRect();
+		const rtl = this.doc.defaultView?.getComputedStyle(target).direction === "rtl";
+		this.openAt(rtl ? rect.right : rect.left, rect.bottom, target);
+	}
+	onPointerDown(event) {
+		if (event.pointerType !== "touch") return;
+		const { clientX: x, clientY: y } = event;
+		const target = event.target;
+		const cancel = (e) => {
+			if (e && e.type === "pointermove" && Math.hypot(e.clientX - x, e.clientY - y) < LONG_PRESS_SLOP) return;
+			clearTimeout(this.pressTimer);
+			this.el.removeEventListener("pointermove", cancel);
+			this.el.removeEventListener("pointerup", cancel);
+			this.el.removeEventListener("pointercancel", cancel);
+		};
+		this.el.addEventListener("pointermove", cancel);
+		this.el.addEventListener("pointerup", cancel);
+		this.el.addEventListener("pointercancel", cancel);
+		clearTimeout(this.pressTimer);
+		this.pressTimer = setTimeout(() => {
+			cancel();
+			this.openAt(x, y, target);
+		}, LONG_PRESS_MS);
+	}
+	openAt(x, y, origin) {
+		const menu = this.vdContextMenu();
+		this.entry ??= acquire(menu, this.doc);
+		if (this.entry.controller.isOpen && this.entry.opener === this.focusable(origin)) return;
+		this.opened.emit();
+		this.entry.opener = this.focusable(origin);
+		this.place(this.entry.anchor, x, y);
+		menu.el.setAttribute("aria-label", this.t().label);
+		menu.labelledBy.set(null);
+		this.entry.controller.close(false);
+		this.entry.controller.open("first");
+	}
+	place(anchor, x, y) {
+		const rtl = this.doc.defaultView?.getComputedStyle(anchor).direction === "rtl";
+		let inline = rtl ? this.doc.documentElement.clientWidth - x : x;
+		let block = y;
+		const set = () => {
+			anchor.style.setProperty("--vd-context-x", `${inline}px`);
+			anchor.style.setProperty("--vd-context-y", `${block}px`);
+		};
+		set();
+		const rect = anchor.getBoundingClientRect();
+		inline += rtl ? rect.left - x : x - rect.left;
+		block += y - rect.top;
+		set();
+	}
+	focusable(origin) {
+		const candidate = origin.closest("a[href], button, input, select, textarea, [tabindex]");
+		return candidate && this.el.contains(candidate) ? candidate : this.el;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdContextMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdContextMenu,
+		isStandalone: true,
+		selector: "[vdContextMenu]",
+		inputs: {
+			vdContextMenu: {
+				classPropertyName: "vdContextMenu",
+				publicName: "vdContextMenu",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { opened: "opened" },
+		host: {
+			listeners: {
+				"contextmenu": "onContextMenu($event)",
+				"keydown": "onKeydown($event)",
+				"pointerdown": "onPointerDown($event)"
+			},
+			classAttribute: "vd-context-menu-target"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdContextMenu,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[vdContextMenu]",
+			host: {
+				class: "vd-context-menu-target",
+				"(contextmenu)": "onContextMenu($event)",
+				"(keydown)": "onKeydown($event)",
+				"(pointerdown)": "onPointerDown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		vdContextMenu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "vdContextMenu",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		opened: [{
+			type: i0.Output,
+			args: ["opened"]
+		}]
+	}
+});
+export { VD_MENU, VdContextMenu, VdMenu, VdMenuController, VdMenuItem, VdMenuLabel, VdMenuSeparator, VdMenuTrigger };
+
+//# sourceMappingURL=vadem-ui-menu.mjs.map