@raqm/ui 0.0.0-stage → 0.1.0

package/fesm2022/raqm-ui-dropdown-menu.mjs

@@ -0,0 +1,1168 @@
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, InjectionToken, booleanAttribute, computed, effect, forwardRef, inject, input, isDevMode, model } from "@angular/core";
+import * as i2 from "@angular/cdk/menu";
+import { CDK_MENU, CdkContextMenuTrigger, CdkMenu, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemSelectable, CdkMenuTrigger, MENU_STACK, MENU_TRIGGER, MenuStack, PARENT_OR_NEW_MENU_STACK_PROVIDER } from "@angular/cdk/menu";
+import { Directionality } from "@angular/cdk/bidi";
+import { FlexibleConnectedPositionStrategy } from "@angular/cdk/overlay";
+import { Subject, Subscription } from "rxjs";
+import { registerOverlayOwnership } from "@raqm/ui/overlay-internal";
+var RaqmMenuDirection = class RaqmMenuDirection extends Directionality {
+	element = inject(ElementRef).nativeElement;
+	observer = null;
+	disposed = false;
+	get value() {
+		const view = this.element.ownerDocument.defaultView;
+		return view ? view.getComputedStyle(this.element).direction === "rtl" ? "rtl" : "ltr" : super.value;
+	}
+	constructor() {
+		super();
+		queueMicrotask(() => {
+			if (this.disposed) return;
+			const view = this.element.ownerDocument.defaultView;
+			if (!view) return;
+			const sync = () => {
+				const next = this.value;
+				if (next !== this.valueSignal()) {
+					this.valueSignal.set(next);
+					this.change.emit(next);
+				}
+			};
+			this.observer = new view.MutationObserver(sync);
+			for (let node = this.element; node; node = node.parentElement) this.observer.observe(node, {
+				attributes: true,
+				attributeFilter: [
+					"dir",
+					"class",
+					"style"
+				]
+			});
+			sync();
+		});
+	}
+	ngOnDestroy() {
+		this.disposed = true;
+		this.observer?.disconnect();
+		super.ngOnDestroy();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuDirection,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmMenuDirection,
+		isStandalone: true,
+		providers: [{
+			provide: Directionality,
+			useExisting: forwardRef(() => RaqmMenuDirection)
+		}],
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuDirection,
+	decorators: [{
+		type: Directive,
+		args: [{ providers: [{
+			provide: Directionality,
+			useExisting: forwardRef(() => RaqmMenuDirection)
+		}] }]
+	}],
+	ctorParameters: () => []
+});
+var RaqmMenuTriggerBase = class RaqmMenuTriggerBase extends CdkMenuTrigger {
+	get menuOverlay() {
+		return this.overlayRef;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuTriggerBase,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmMenuTriggerBase,
+		isStandalone: true,
+		providers: [
+			{
+				provide: CdkMenuTrigger,
+				useExisting: forwardRef(() => RaqmMenuTriggerBase)
+			},
+			{
+				provide: MENU_TRIGGER,
+				useExisting: forwardRef(() => RaqmMenuTriggerBase)
+			},
+			PARENT_OR_NEW_MENU_STACK_PROVIDER
+		],
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuTriggerBase,
+	decorators: [{
+		type: Directive,
+		args: [{ providers: [
+			{
+				provide: CdkMenuTrigger,
+				useExisting: forwardRef(() => RaqmMenuTriggerBase)
+			},
+			{
+				provide: MENU_TRIGGER,
+				useExisting: forwardRef(() => RaqmMenuTriggerBase)
+			},
+			PARENT_OR_NEW_MENU_STACK_PROVIDER
+		] }]
+	}]
+});
+var RaqmContextMenuTriggerBase = class RaqmContextMenuTriggerBase extends CdkContextMenuTrigger {
+	geometryChanged = new Subject();
+	get menuOverlay() {
+		return this.overlayRef;
+	}
+	menuAnchorPoint = null;
+	open(coordinates) {
+		this.menuAnchorPoint = coordinates;
+		super.open(coordinates);
+		this.geometryChanged.next();
+	}
+	ngOnDestroy() {
+		this.geometryChanged.complete();
+		super.ngOnDestroy();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmContextMenuTriggerBase,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmContextMenuTriggerBase,
+		isStandalone: true,
+		providers: [
+			{
+				provide: CdkContextMenuTrigger,
+				useExisting: forwardRef(() => RaqmContextMenuTriggerBase)
+			},
+			{
+				provide: MENU_TRIGGER,
+				useExisting: forwardRef(() => RaqmContextMenuTriggerBase)
+			},
+			{
+				provide: MENU_STACK,
+				useClass: MenuStack
+			}
+		],
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmContextMenuTriggerBase,
+	decorators: [{
+		type: Directive,
+		args: [{ providers: [
+			{
+				provide: CdkContextMenuTrigger,
+				useExisting: forwardRef(() => RaqmContextMenuTriggerBase)
+			},
+			{
+				provide: MENU_TRIGGER,
+				useExisting: forwardRef(() => RaqmContextMenuTriggerBase)
+			},
+			{
+				provide: MENU_STACK,
+				useClass: MenuStack
+			}
+		] }]
+	}]
+});
+var RaqmMenuOverlaySync = class {
+	trigger;
+	anchor;
+	directionality;
+	options;
+	generation = 0;
+	disposed = false;
+	frame = 0;
+	overlay = null;
+	releaseOwnership;
+	resizeObserver = null;
+	connection;
+	subscriptions = new Subscription();
+	schedule = () => {
+		const view = this.anchor.ownerDocument.defaultView;
+		if (!view || !this.overlay || this.frame || this.disposed) return;
+		this.frame = view.requestAnimationFrame(() => {
+			this.frame = 0;
+			this.measure();
+		});
+	};
+	constructor(trigger, anchor, destroyRef, directionality, options) {
+		this.trigger = trigger;
+		this.anchor = anchor;
+		this.directionality = directionality;
+		this.options = options;
+		this.subscriptions.add(trigger.opened.subscribe(() => {
+			const generation = ++this.generation;
+			queueMicrotask(() => {
+				if (this.disposed || generation !== this.generation || !trigger.isOpen()) return;
+				this.detach();
+				this.overlay = trigger.menuOverlay;
+				if (!this.overlay) return;
+				this.releaseOwnership = registerOverlayOwnership(this.anchor, this.overlay);
+				this.observe();
+				this.measure();
+			});
+		}));
+		this.subscriptions.add(trigger.closed.subscribe(() => {
+			++this.generation;
+			this.detach();
+		}));
+		this.subscriptions.add(directionality.change.subscribe(this.schedule));
+		if (trigger instanceof RaqmContextMenuTriggerBase) this.subscriptions.add(trigger.geometryChanged.subscribe(this.schedule));
+		destroyRef.onDestroy(() => {
+			this.disposed = true;
+			++this.generation;
+			this.detach();
+			this.subscriptions.unsubscribe();
+		});
+	}
+	refresh() {
+		this.schedule();
+	}
+	measure() {
+		const overlay = this.overlay;
+		if (this.disposed || !overlay?.hasAttached()) return;
+		const strategy = overlay.getConfig().positionStrategy;
+		if (!(strategy instanceof FlexibleConnectedPositionStrategy)) return;
+		const pane = overlay.overlayElement;
+		const height = this.anchor.ownerDocument.documentElement.clientHeight;
+		overlay.setDirection(this.directionality.value);
+		const positions = this.options.positions?.() ?? strategy.positions;
+		strategy.withPositions(positions.map((position) => ({ ...position })));
+		if (this.options.matchAnchorWidth) {
+			pane.style.setProperty("--raqm-menu-anchor-width", `${this.anchor.getBoundingClientRect().width}px`);
+			pane.setAttribute("data-raqm-anchor-width", "");
+		}
+		pane.style.setProperty("--raqm-menu-available-height", `${Math.max(0, height - 10)}px`);
+		strategy.withViewportMargin(5).withFlexibleDimensions(false).withLockedPosition(false).withPush(true);
+		const selection = strategy.positionChanges.subscribe((event) => {
+			this.connection = event.connectionPair;
+		});
+		overlay.updatePosition();
+		selection.unsubscribe();
+		if (!this.connection) return;
+		const pair = this.connection;
+		const point = this.options.anchorPoint?.();
+		const rect = this.anchor.getBoundingClientRect();
+		const origin = point ? point.y : pair.originY === "top" ? rect.top : pair.originY === "bottom" ? rect.bottom : rect.top + rect.height / 2;
+		const edge = Math.max(5, Math.min(height - 5, origin + (pair.offsetY ?? 0)));
+		const available = pair.overlayY === "bottom" ? edge - 5 : pair.overlayY === "center" ? 2 * Math.min(edge - 5, height - 5 - edge) : height - 5 - edge;
+		pane.style.setProperty("--raqm-menu-available-height", `${Math.max(0, Math.min(height - 10, available))}px`);
+		strategy.reapplyLastPosition();
+	}
+	observe() {
+		const view = this.anchor.ownerDocument.defaultView;
+		view?.addEventListener("resize", this.schedule, { passive: true });
+		view?.document.addEventListener("scroll", this.schedule, {
+			capture: true,
+			passive: true
+		});
+		if (view && typeof view.ResizeObserver !== "undefined" && this.overlay) {
+			this.resizeObserver = new view.ResizeObserver(this.schedule);
+			this.resizeObserver.observe(this.overlay.overlayElement);
+			this.resizeObserver.observe(this.anchor);
+		}
+	}
+	detach() {
+		this.releaseOwnership?.();
+		this.releaseOwnership = void 0;
+		const view = this.anchor.ownerDocument.defaultView;
+		view?.removeEventListener("resize", this.schedule);
+		view?.document.removeEventListener("scroll", this.schedule, { capture: true });
+		if (this.frame) view?.cancelAnimationFrame(this.frame);
+		this.frame = 0;
+		this.resizeObserver?.disconnect();
+		this.resizeObserver = null;
+		this.overlay = null;
+		this.connection = void 0;
+	}
+};
+var RaqmMenuDirective = class RaqmMenuDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmMenuDirective,
+		isStandalone: true,
+		selector: "[raqm-menu]",
+		host: { classAttribute: "raqm-menu" },
+		hostDirectives: [{ directive: RaqmMenuDirection }, { directive: i2.CdkMenu }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-menu]",
+			hostDirectives: [RaqmMenuDirection, { directive: CdkMenu }],
+			host: { class: "raqm-menu" }
+		}]
+	}]
+});
+var RaqmMenuGroupDirective = class RaqmMenuGroupDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuGroupDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmMenuGroupDirective,
+		isStandalone: true,
+		selector: "[raqm-menu-group]",
+		host: {
+			attributes: { "role": "group" },
+			classAttribute: "raqm-menu-group"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuGroupDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-menu-group]",
+			host: {
+				class: "raqm-menu-group",
+				role: "group"
+			}
+		}]
+	}]
+});
+var RaqmMenuLabelDirective = class RaqmMenuLabelDirective {
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuLabelDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmMenuLabelDirective,
+		isStandalone: true,
+		selector: "[raqm-menu-label]",
+		inputs: { inset: {
+			classPropertyName: "inset",
+			publicName: "inset",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			properties: { "attr.data-raqm-inset": "inset() ? \"\" : null" },
+			classAttribute: "raqm-menu-label"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuLabelDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-menu-label]",
+			host: {
+				class: "raqm-menu-label",
+				"[attr.data-raqm-inset]": "inset() ? \"\" : null"
+			}
+		}]
+	}],
+	propDecorators: { inset: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "inset",
+			required: false
+		}]
+	}] }
+});
+var RaqmMenuSeparatorDirective = class RaqmMenuSeparatorDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuSeparatorDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmMenuSeparatorDirective,
+		isStandalone: true,
+		selector: "[raqm-menu-separator]",
+		host: {
+			attributes: {
+				"role": "separator",
+				"aria-orientation": "horizontal"
+			},
+			classAttribute: "raqm-menu-separator"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuSeparatorDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-menu-separator]",
+			host: {
+				class: "raqm-menu-separator",
+				role: "separator",
+				"aria-orientation": "horizontal"
+			}
+		}]
+	}]
+});
+var RaqmMenuShortcutDirective = class RaqmMenuShortcutDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuShortcutDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmMenuShortcutDirective,
+		isStandalone: true,
+		selector: "[raqm-menu-shortcut]",
+		host: { classAttribute: "raqm-menu-shortcut" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuShortcutDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-menu-shortcut]",
+			host: { class: "raqm-menu-shortcut" }
+		}]
+	}]
+});
+const ROOT_MENU_POSITIONS = [{
+	originX: "start",
+	originY: "bottom",
+	overlayX: "start",
+	overlayY: "top",
+	offsetY: 4
+}, {
+	originX: "start",
+	originY: "top",
+	overlayX: "start",
+	overlayY: "bottom",
+	offsetY: -4
+}];
+const SUBMENU_ALIGN_OFFSET = -3;
+const SUBMENU_POSITIONS = [{
+	originX: "end",
+	originY: "top",
+	overlayX: "start",
+	overlayY: "top",
+	offsetY: SUBMENU_ALIGN_OFFSET
+}, {
+	originX: "start",
+	originY: "top",
+	overlayX: "end",
+	overlayY: "top",
+	offsetY: SUBMENU_ALIGN_OFFSET
+}];
+const RAQM_MENU_SUBMENU_POSITIONS = new InjectionToken("RAQM_MENU_SUBMENU_POSITIONS");
+var RaqmMenuTriggerDirective = class RaqmMenuTriggerDirective {
+	trigger = inject(RaqmMenuTriggerBase);
+	parentMenu = inject(CDK_MENU, { optional: true });
+	submenu = this.parentMenu !== null;
+	element = inject(ElementRef);
+	directionality = inject(Directionality);
+	submenuPositionsDefault = inject(RAQM_MENU_SUBMENU_POSITIONS, { optional: true }) ?? SUBMENU_POSITIONS;
+	overlaySync = new RaqmMenuOverlaySync(this.trigger, this.element.nativeElement, inject(DestroyRef), this.directionality, { matchAnchorWidth: !this.submenu });
+	ngOnInit() {
+		if (this.trigger.menuPosition == null) this.trigger.menuPosition = this.submenu ? this.submenuPositionsDefault : ROOT_MENU_POSITIONS;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuTriggerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmMenuTriggerDirective,
+		isStandalone: true,
+		selector: "button[raqm-menu-trigger-for], a[raqm-menu-trigger-for]",
+		host: {
+			properties: { "attr.data-raqm-submenu": "submenu ? \"\" : null" },
+			classAttribute: "raqm-menu-trigger"
+		},
+		hostDirectives: [{ directive: RaqmMenuDirection }, {
+			directive: RaqmMenuTriggerBase,
+			inputs: [
+				"cdkMenuTriggerFor",
+				"raqm-menu-trigger-for",
+				"cdkMenuPosition",
+				"positions"
+			],
+			outputs: [
+				"cdkMenuOpened",
+				"opened",
+				"cdkMenuClosed",
+				"closed"
+			]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-menu-trigger-for], a[raqm-menu-trigger-for]",
+			hostDirectives: [RaqmMenuDirection, {
+				directive: RaqmMenuTriggerBase,
+				inputs: ["cdkMenuTriggerFor: raqm-menu-trigger-for", "cdkMenuPosition: positions"],
+				outputs: ["cdkMenuOpened: opened", "cdkMenuClosed: closed"]
+			}],
+			host: {
+				class: "raqm-menu-trigger",
+				"[attr.data-raqm-submenu]": "submenu ? \"\" : null"
+			}
+		}]
+	}]
+});
+const SPACE_KEY_CODE = 32;
+var RaqmMenuItemDirective = class RaqmMenuItemDirective {
+	elementRef = inject(ElementRef);
+	destroyRef = inject(DestroyRef);
+	item = inject(CdkMenuItem);
+	appearance = input("", {
+		...ngDevMode ? { debugName: "appearance" } : /* istanbul ignore next */ {},
+		alias: "raqm-menu-item"
+	});
+	activeAppearance = computed(() => this.appearance() || "default", ...ngDevMode ? [{ debugName: "activeAppearance" }] : /* istanbul ignore next */ []);
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	guardDisabledAnchor = (event) => {
+		if (!this.item.disabled) return;
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	};
+	activateAnchorWithSpace = (event) => {
+		if (event.keyCode !== SPACE_KEY_CODE || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		event.preventDefault();
+		event.stopImmediatePropagation();
+		if (event.repeat || this.item.disabled) return;
+		this.elementRef.nativeElement.click();
+	};
+	constructor() {
+		const element = this.elementRef.nativeElement;
+		if (element.nodeName !== "A") return;
+		element.addEventListener("click", this.guardDisabledAnchor, true);
+		element.addEventListener("auxclick", this.guardDisabledAnchor, true);
+		element.addEventListener("keydown", this.activateAnchorWithSpace, true);
+		this.destroyRef.onDestroy(() => {
+			element.removeEventListener("click", this.guardDisabledAnchor, true);
+			element.removeEventListener("auxclick", this.guardDisabledAnchor, true);
+			element.removeEventListener("keydown", this.activateAnchorWithSpace, true);
+		});
+	}
+	onPointerEnter(event) {
+		if (!(event instanceof PointerEvent) || event.pointerType === "touch" || this.item.disabled) return;
+		this.item.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmMenuItemDirective,
+		isStandalone: true,
+		selector: "button[raqm-menu-item], a[raqm-menu-item]",
+		inputs: {
+			appearance: {
+				classPropertyName: "appearance",
+				publicName: "raqm-menu-item",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: { "pointerenter": "onPointerEnter($event)" },
+			properties: {
+				"attr.data-raqm-variant": "activeAppearance()",
+				"attr.data-raqm-inset": "inset() ? \"\" : null"
+			},
+			classAttribute: "raqm-menu-item"
+		},
+		hostDirectives: [{
+			directive: i2.CdkMenuItem,
+			inputs: ["cdkMenuItemDisabled", "disabled"],
+			outputs: ["cdkMenuItemTriggered", "triggered"]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-menu-item], a[raqm-menu-item]",
+			hostDirectives: [{
+				directive: CdkMenuItem,
+				inputs: ["cdkMenuItemDisabled: disabled"],
+				outputs: ["cdkMenuItemTriggered: triggered"]
+			}],
+			host: {
+				class: "raqm-menu-item",
+				"[attr.data-raqm-variant]": "activeAppearance()",
+				"[attr.data-raqm-inset]": "inset() ? \"\" : null",
+				"(pointerenter)": "onPointerEnter($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		appearance: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "raqm-menu-item",
+				required: false
+			}]
+		}],
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmMenuCheckboxItemBase = class RaqmMenuCheckboxItemBase extends CdkMenuItemCheckbox {
+	trigger(options) {
+		super.trigger({
+			...options,
+			keepOpen: true
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuCheckboxItemBase,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmMenuCheckboxItemBase,
+		isStandalone: true,
+		providers: [{
+			provide: CdkMenuItemSelectable,
+			useExisting: RaqmMenuCheckboxItemBase
+		}, {
+			provide: CdkMenuItem,
+			useExisting: RaqmMenuCheckboxItemBase
+		}],
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuCheckboxItemBase,
+	decorators: [{
+		type: Directive,
+		args: [{ providers: [{
+			provide: CdkMenuItemSelectable,
+			useExisting: RaqmMenuCheckboxItemBase
+		}, {
+			provide: CdkMenuItem,
+			useExisting: RaqmMenuCheckboxItemBase
+		}] }]
+	}]
+});
+var RaqmMenuCheckboxItemDirective = class RaqmMenuCheckboxItemDirective {
+	checkbox = inject(RaqmMenuCheckboxItemBase);
+	element = inject(ElementRef);
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	triggerSubscription;
+	constructor() {
+		effect(() => {
+			const checked = this.checked();
+			this.checkbox.checked = checked;
+			this.element.nativeElement.setAttribute("aria-checked", String(checked));
+		});
+		this.triggerSubscription = this.checkbox.triggered.subscribe(() => {
+			this.checked.set(!this.checkbox.checked);
+		});
+	}
+	ngOnDestroy() {
+		this.triggerSubscription.unsubscribe();
+	}
+	onPointerEnter(event) {
+		if (!(event instanceof PointerEvent) || event.pointerType === "touch" || this.checkbox.disabled) return;
+		this.checkbox.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuCheckboxItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmMenuCheckboxItemDirective,
+		isStandalone: true,
+		selector: "button[raqm-menu-checkbox-item]",
+		inputs: {
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { checked: "checkedChange" },
+		host: {
+			listeners: { "pointerenter": "onPointerEnter($event)" },
+			properties: { "attr.data-raqm-inset": "inset() ? \"\" : null" },
+			classAttribute: "raqm-menu-checkbox-item"
+		},
+		hostDirectives: [{
+			directive: RaqmMenuCheckboxItemBase,
+			inputs: ["cdkMenuItemDisabled", "disabled"]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuCheckboxItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-menu-checkbox-item]",
+			hostDirectives: [{
+				directive: RaqmMenuCheckboxItemBase,
+				inputs: ["cdkMenuItemDisabled: disabled"]
+			}],
+			host: {
+				class: "raqm-menu-checkbox-item",
+				"[attr.data-raqm-inset]": "inset() ? \"\" : null",
+				"(pointerenter)": "onPointerEnter($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}],
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}]
+	}
+});
+const RAQM_MENU_RADIO_GROUP = new InjectionToken("raqm-menu-radio-group");
+var RaqmMenuRadioItemBase = class RaqmMenuRadioItemBase extends CdkMenuItemRadio {
+	trigger(options) {
+		super.trigger({
+			...options,
+			keepOpen: true
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuRadioItemBase,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmMenuRadioItemBase,
+		isStandalone: true,
+		providers: [{
+			provide: CdkMenuItemSelectable,
+			useExisting: RaqmMenuRadioItemBase
+		}, {
+			provide: CdkMenuItem,
+			useExisting: RaqmMenuRadioItemBase
+		}],
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuRadioItemBase,
+	decorators: [{
+		type: Directive,
+		args: [{ providers: [{
+			provide: CdkMenuItemSelectable,
+			useExisting: RaqmMenuRadioItemBase
+		}, {
+			provide: CdkMenuItem,
+			useExisting: RaqmMenuRadioItemBase
+		}] }]
+	}]
+});
+var RaqmMenuRadioGroupDirective = class RaqmMenuRadioGroupDirective {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	registrations = /* @__PURE__ */ new Map();
+	isSelected(value) {
+		return this.value() === value;
+	}
+	select(value) {
+		this.value.set(value);
+	}
+	register(value) {
+		if (!value && isDevMode()) throw new Error("Raqm menu radio item: a non-empty `value` is required.");
+		const count = this.registrations.get(value) ?? 0;
+		if (count > 0 && isDevMode()) throw new Error(`Raqm menu radio group: duplicate radio item value "${value}". Each radio item inside one group needs a unique non-empty value.`);
+		this.registrations.set(value, count + 1);
+	}
+	unregister(value) {
+		const count = this.registrations.get(value) ?? 0;
+		if (count <= 1) this.registrations.delete(value);
+		else this.registrations.set(value, count - 1);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuRadioGroupDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmMenuRadioGroupDirective,
+		isStandalone: true,
+		selector: "[raqm-menu-radio-group]",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { value: "valueChange" },
+		providers: [{
+			provide: RAQM_MENU_RADIO_GROUP,
+			useExisting: RaqmMenuRadioGroupDirective
+		}],
+		hostDirectives: [{ directive: i2.CdkMenuGroup }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuRadioGroupDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-menu-radio-group]",
+			hostDirectives: [{ directive: CdkMenuGroup }],
+			providers: [{
+				provide: RAQM_MENU_RADIO_GROUP,
+				useExisting: RaqmMenuRadioGroupDirective
+			}]
+		}]
+	}],
+	propDecorators: { value: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "value",
+			required: false
+		}]
+	}, {
+		type: i0.Output,
+		args: ["valueChange"]
+	}] }
+});
+var RaqmMenuRadioItemDirective = class RaqmMenuRadioItemDirective {
+	radio = inject(RaqmMenuRadioItemBase);
+	group;
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	triggerSubscription;
+	registeredValue = null;
+	constructor() {
+		const group = inject(RAQM_MENU_RADIO_GROUP, { optional: true });
+		if (!group) throw new Error("Raqm menu radio item: an enclosing [raqm-menu-radio-group] is required.");
+		this.group = group;
+		effect(() => {
+			this.radio.checked = this.group.isSelected(this.value());
+		});
+		this.triggerSubscription = this.radio.triggered.subscribe(() => {
+			if (!this.radio.disabled) this.group.select(this.value());
+		});
+	}
+	ngOnInit() {
+		this.updateRegistration(this.value());
+	}
+	ngOnChanges(changes) {
+		if (changes["value"] && this.registeredValue !== null) this.updateRegistration(this.value());
+	}
+	updateRegistration(value) {
+		if (value === this.registeredValue) return;
+		this.group.register(value);
+		const previousValue = this.registeredValue;
+		this.registeredValue = value;
+		if (previousValue !== null) this.group.unregister(previousValue);
+	}
+	ngOnDestroy() {
+		if (this.registeredValue !== null) this.group.unregister(this.registeredValue);
+		this.triggerSubscription.unsubscribe();
+	}
+	onPointerEnter(event) {
+		if (!(event instanceof PointerEvent) || event.pointerType === "touch" || this.radio.disabled) return;
+		this.radio.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmMenuRadioItemDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmMenuRadioItemDirective,
+		isStandalone: true,
+		selector: "button[raqm-menu-radio-item]",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: { "pointerenter": "onPointerEnter($event)" },
+			properties: { "attr.data-raqm-inset": "inset() ? \"\" : null" },
+			classAttribute: "raqm-menu-radio-item"
+		},
+		usesOnChanges: true,
+		hostDirectives: [{
+			directive: RaqmMenuRadioItemBase,
+			inputs: ["cdkMenuItemDisabled", "disabled"]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmMenuRadioItemDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "button[raqm-menu-radio-item]",
+			hostDirectives: [{
+				directive: RaqmMenuRadioItemBase,
+				inputs: ["cdkMenuItemDisabled: disabled"]
+			}],
+			host: {
+				class: "raqm-menu-radio-item",
+				"[attr.data-raqm-inset]": "inset() ? \"\" : null",
+				"(pointerenter)": "onPointerEnter($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}]
+	}
+});
+const RaqmDropdownMenu = [
+	RaqmMenuDirective,
+	RaqmMenuTriggerDirective,
+	RaqmMenuItemDirective,
+	RaqmMenuCheckboxItemDirective,
+	RaqmMenuRadioGroupDirective,
+	RaqmMenuRadioItemDirective,
+	RaqmMenuGroupDirective,
+	RaqmMenuLabelDirective,
+	RaqmMenuSeparatorDirective,
+	RaqmMenuShortcutDirective
+];
+export { RAQM_MENU_SUBMENU_POSITIONS, RaqmContextMenuTriggerBase, RaqmDropdownMenu, RaqmMenuCheckboxItemBase, RaqmMenuCheckboxItemDirective, RaqmMenuDirection, RaqmMenuDirective, RaqmMenuGroupDirective, RaqmMenuItemDirective, RaqmMenuLabelDirective, RaqmMenuOverlaySync, RaqmMenuRadioGroupDirective, RaqmMenuRadioItemBase, RaqmMenuRadioItemDirective, RaqmMenuSeparatorDirective, RaqmMenuShortcutDirective, RaqmMenuTriggerBase, RaqmMenuTriggerDirective };
+
+//# sourceMappingURL=raqm-ui-dropdown-menu.mjs.map