@raqm/ui 0.0.0-stage → 0.1.1

package/fesm2022/raqm-ui-hover-card.mjs

@@ -0,0 +1,828 @@
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import { InteractivityChecker } from "@angular/cdk/a11y";
+import { Overlay } from "@angular/cdk/overlay";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, TemplateRef, ViewContainerRef, afterNextRender, booleanAttribute, computed, effect, inject, input, model, numberAttribute, signal, untracked, viewChild } from "@angular/core";
+import { TemplatePortal } from "@angular/cdk/portal";
+import { registerOverlayOwnership } from "@raqm/ui/overlay-internal";
+import { Subscription } from "rxjs";
+function connectHoverCardEffects(host) {
+	effect(() => {
+		const ready = host.open() && host.trigger() !== null && host.content() !== null && host.panel() !== void 0;
+		host.side();
+		host.align();
+		host.sideOffset();
+		host.alignOffset();
+		untracked(() => {
+			if (ready) {
+				host.attach();
+				host.positionPane();
+			} else host.detach();
+		});
+	});
+}
+const DEFAULT_SIDE = "bottom";
+const DEFAULT_ALIGN = "center";
+const TABBABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex], [contenteditable=\"true\"]";
+var RaqmHoverCardIntent = class {
+	host;
+	openTimer;
+	closeTimer;
+	transit;
+	focusOwned = false;
+	constructor(host) {
+		this.host = host;
+	}
+	requestOpen(fromFocus = false) {
+		if (fromFocus) this.focusOwned = true;
+		this.cancelClose();
+		this.clearTransit();
+		const trigger = this.host.trigger();
+		if (!trigger || trigger.element.matches(":disabled") || this.host.open() || this.openTimer !== void 0) return;
+		this.listenEscape();
+		this.openTimer = setTimeout(() => {
+			this.openTimer = void 0;
+			if (!this.host.destroyed() && !trigger.element.matches(":disabled")) this.host.setOpen(true);
+		}, trigger.delay());
+	}
+	close() {
+		this.focusOwned = false;
+		this.cancelOpen();
+		this.cancelClose();
+		this.clearTransit();
+		this.unlistenEscape();
+		this.host.setOpen(false);
+		this.host.detach();
+	}
+	focusOut(event) {
+		const next = event.relatedTarget;
+		if (next && (this.host.trigger()?.element.contains(next) || this.host.overlay().element?.contains(next))) return;
+		this.close();
+	}
+	pointerEnter(event) {
+		if (event.pointerType === "mouse") {
+			this.cancelClose();
+			this.clearTransit();
+		}
+	}
+	contentFocus() {
+		this.cancelClose();
+		this.clearTransit();
+	}
+	pointerLeave(event) {
+		if (event.pointerType !== "mouse") return;
+		if (this.focusOwned || this.host.overlay().element?.contains(this.host.document.activeElement)) return;
+		this.cancelOpen();
+		this.clearTransit();
+		const trigger = this.host.trigger()?.element;
+		const surface = this.host.overlay().surface();
+		if (!trigger || !surface) {
+			this.unlistenEscape();
+			return;
+		}
+		const fromContent = surface.contains(event.target);
+		const destination = fromContent ? trigger : surface;
+		if (event.relatedTarget instanceof Node && destination.contains(event.relatedTarget)) return;
+		const start = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		this.scheduleClose();
+		this.transit = (move) => {
+			const a = trigger.getBoundingClientRect();
+			const b = surface.getBoundingClientRect();
+			const inside = (r) => move.clientX >= r.left && move.clientX <= r.right && move.clientY >= r.top && move.clientY <= r.bottom;
+			if (inside(a) || inside(b)) {
+				this.cancelClose();
+				this.clearTransit();
+				return;
+			}
+			const target = destination.getBoundingClientRect();
+			const side = this.host.side();
+			const vertical = side === "top" || side === "bottom";
+			const edge = vertical ? fromContent ? side === "bottom" ? target.bottom : target.top : side === "bottom" ? target.top : target.bottom : fromContent ? side === "right" ? target.right : target.left : side === "right" ? target.left : target.right;
+			const p = vertical ? {
+				x: target.left - 1,
+				y: edge
+			} : {
+				x: edge,
+				y: target.top - 1
+			};
+			const q = vertical ? {
+				x: target.right + 1,
+				y: edge
+			} : {
+				x: edge,
+				y: target.bottom + 1
+			};
+			const cross = (u, v, w) => (u.x - w.x) * (v.y - w.y) - (v.x - w.x) * (u.y - w.y);
+			const point = {
+				x: move.clientX,
+				y: move.clientY
+			};
+			const signs = [
+				cross(point, start, p),
+				cross(point, p, q),
+				cross(point, q, start)
+			];
+			const inTriangle = !(signs.some((n) => n < -1) && signs.some((n) => n > 1));
+			const inTrough = vertical ? move.clientX >= Math.max(a.left, b.left) && move.clientX <= Math.min(a.right, b.right) && move.clientY >= Math.min(a.bottom, b.bottom) && move.clientY <= Math.max(a.top, b.top) : move.clientY >= Math.max(a.top, b.top) && move.clientY <= Math.min(a.bottom, b.bottom) && move.clientX >= Math.min(a.right, b.right) && move.clientX <= Math.max(a.left, b.left);
+			if (inTriangle || inTrough) this.cancelClose();
+			else {
+				this.scheduleClose();
+				this.clearTransit();
+			}
+		};
+		this.host.document.addEventListener("pointermove", this.transit);
+	}
+	listenEscape() {
+		this.host.document.addEventListener("keydown", this.escape);
+	}
+	unlistenEscape() {
+		this.host.document.removeEventListener("keydown", this.escape);
+	}
+	release() {
+		this.cancelOpen();
+		this.cancelClose();
+		this.clearTransit();
+		this.unlistenEscape();
+	}
+	scheduleClose() {
+		if (this.closeTimer !== void 0) return;
+		this.closeTimer = setTimeout(() => {
+			this.closeTimer = void 0;
+			this.close();
+		}, this.host.trigger()?.closeDelay() ?? 300);
+	}
+	cancelOpen() {
+		clearTimeout(this.openTimer);
+		this.openTimer = void 0;
+	}
+	cancelClose() {
+		clearTimeout(this.closeTimer);
+		this.closeTimer = void 0;
+	}
+	clearTransit() {
+		if (this.transit) this.host.document.removeEventListener("pointermove", this.transit);
+		this.transit = void 0;
+	}
+	escape = (event) => {
+		if (event.key === "Escape") {
+			if (this.host.overlay().ref) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			this.close();
+		}
+	};
+};
+var RaqmHoverCardKeyboard = class {
+	checker;
+	host;
+	constructor(checker, host) {
+		this.checker = checker;
+		this.host = host;
+	}
+	onTriggerKeydown(event) {
+		const ref = this.host.overlayRef();
+		if (event.key !== "Tab" || event.shiftKey || !ref) return;
+		const first = this.tabbables(ref.overlayElement)[0];
+		if (first) {
+			event.preventDefault();
+			first.focus();
+		}
+	}
+	onPanelKeydown(event) {
+		const ref = this.host.overlayRef();
+		if (event.key !== "Tab" || !ref) return;
+		const items = this.tabbables(ref.overlayElement);
+		const active = this.host.document.activeElement;
+		if (event.shiftKey && active === items[0]) {
+			event.preventDefault();
+			this.host.trigger()?.element.focus();
+		} else if (!event.shiftKey && active === items.at(-1)) {
+			const trigger = this.host.trigger()?.element;
+			const all = this.tabbables(this.host.document.body).filter((item) => !ref.overlayElement.contains(item));
+			const next = trigger ? all[all.indexOf(trigger) + 1] : void 0;
+			if (next) {
+				event.preventDefault();
+				next.focus();
+			}
+		}
+	}
+	tabbables(root) {
+		return Array.from(root.querySelectorAll(TABBABLE_SELECTOR)).filter((item) => this.checker.isTabbable(item));
+	}
+};
+var RaqmHoverCardOverlay = class {
+	overlay;
+	state;
+	position;
+	host;
+	overlayRef;
+	strategy;
+	subscriptions = new Subscription();
+	render;
+	observer;
+	exitTimer;
+	exiting;
+	constructor(overlay, state, position, host) {
+		this.overlay = overlay;
+		this.state = state;
+		this.position = position;
+		this.host = host;
+	}
+	get element() {
+		return this.overlayRef?.overlayElement;
+	}
+	get ref() {
+		return this.overlayRef;
+	}
+	attach() {
+		if (this.overlayRef || this.state.destroyed) return;
+		const trigger = this.host.trigger();
+		const panel = this.host.panel();
+		if (!trigger || !panel) return;
+		clearTimeout(this.exitTimer);
+		this.exiting?.dispose();
+		this.exiting = void 0;
+		this.state.direction.set(this.computedDirection());
+		this.strategy = this.overlay.position().flexibleConnectedTo(trigger.element).withFlexibleDimensions(false).withPush(true).withViewportMargin(5).withTransformOriginOn(".raqm-hover-card-content").withPositions(this.position.positions());
+		const ref = this.overlay.create({
+			positionStrategy: this.strategy,
+			hasBackdrop: false,
+			direction: this.state.direction(),
+			scrollStrategy: this.overlay.scrollStrategies.reposition(),
+			disposeOnNavigation: true
+		});
+		registerOverlayOwnership(trigger.element, ref);
+		this.overlayRef = ref;
+		this.subscriptions = new Subscription();
+		this.subscriptions.add(this.strategy.positionChanges.subscribe((change) => {
+			const side = this.position.sideFor(change.connectionPair);
+			this.state.resolvedSide.set(side);
+		}));
+		this.subscriptions.add(ref.outsidePointerEvents().subscribe((event) => {
+			if (!trigger.element.contains(event.target)) this.host.close();
+		}));
+		this.subscriptions.add(ref.detachments().subscribe(() => this.host.close()));
+		this.host.listenEscape();
+		ref.attach(new TemplatePortal(panel, this.host.container));
+		ref.overlayElement.style.visibility = "hidden";
+		this.render = afterNextRender(() => {
+			this.render = void 0;
+			if (this.overlayRef !== ref) return;
+			this.positionPane();
+			ref.overlayElement.style.visibility = "";
+			this.surface()?.classList.add("raqm-hover-card-content--entering");
+			if (typeof ResizeObserver !== "undefined") {
+				this.observer = new ResizeObserver(() => this.positionPane());
+				this.observer.observe(trigger.element);
+				const surface = this.surface();
+				if (surface) this.observer.observe(surface);
+			}
+		}, { injector: this.host.injector });
+	}
+	positionPane() {
+		const direction = this.computedDirection();
+		this.state.direction.set(direction);
+		this.overlayRef?.setDirection(direction);
+		this.strategy?.withPositions(this.position.positions());
+		this.overlayRef?.updatePosition();
+	}
+	surface() {
+		return this.overlayRef?.overlayElement.querySelector(".raqm-hover-card-content") ?? null;
+	}
+	detach() {
+		this.host.releaseIntent();
+		this.render?.destroy();
+		this.render = void 0;
+		this.observer?.disconnect();
+		this.observer = void 0;
+		this.subscriptions.unsubscribe();
+		const ref = this.overlayRef;
+		this.overlayRef = void 0;
+		this.strategy = void 0;
+		if (!ref) return;
+		ref.overlayElement.setAttribute("inert", "");
+		ref.overlayElement.setAttribute("aria-hidden", "true");
+		const surface = ref.overlayElement.querySelector(".raqm-hover-card-content");
+		surface?.classList.remove("raqm-hover-card-content--entering");
+		surface?.classList.add("raqm-hover-card-content--closing");
+		if (this.state.destroyed || this.host.document.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches) ref.dispose();
+		else {
+			this.exiting = ref;
+			this.exitTimer = setTimeout(() => {
+				ref.dispose();
+				this.exiting = void 0;
+				this.exitTimer = void 0;
+			}, 100);
+		}
+	}
+	destroy() {
+		this.state.destroyed = true;
+		this.detach();
+		clearTimeout(this.exitTimer);
+		this.exiting?.dispose();
+		this.exiting = void 0;
+	}
+	computedDirection() {
+		return getComputedStyle(this.host.root).direction === "rtl" ? "rtl" : "ltr";
+	}
+};
+var RaqmHoverCardPosition = class {
+	host;
+	positionSides = [];
+	currentPositions = [];
+	constructor(host) {
+		this.host = host;
+	}
+	sideFor(pair) {
+		return this.positionSides[this.currentPositions.indexOf(pair)] ?? "bottom";
+	}
+	positions() {
+		const rtl = this.host.direction() === "rtl";
+		const requested = this.host.side();
+		const side = requested === "inline-start" ? rtl ? "right" : "left" : requested === "inline-end" ? rtl ? "left" : "right" : requested;
+		const opposite = {
+			top: "bottom",
+			bottom: "top",
+			left: "right",
+			right: "left"
+		};
+		this.positionSides = [side, opposite[side]];
+		this.currentPositions = this.positionSides.map((value) => {
+			const align = this.host.align();
+			const rawMain = this.host.sideOffset();
+			const rawCross = this.host.alignOffset();
+			const main = Number.isFinite(rawMain) ? rawMain : 4;
+			const cross = (Number.isFinite(rawCross) ? rawCross : 4) * (align === "end" ? -1 : 1);
+			if (value === "top" || value === "bottom") return {
+				originX: align,
+				overlayX: align,
+				originY: value,
+				overlayY: value === "top" ? "bottom" : "top",
+				offsetY: value === "top" ? -main : main,
+				offsetX: cross * (rtl ? -1 : 1)
+			};
+			const y = align === "start" ? "top" : align === "end" ? "bottom" : "center";
+			const end = value === "right";
+			return {
+				originX: end !== rtl ? "end" : "start",
+				overlayX: end !== rtl ? "start" : "end",
+				originY: y,
+				overlayY: y,
+				offsetX: end ? main : -main,
+				offsetY: cross
+			};
+		});
+		return this.currentPositions;
+	}
+};
+var RaqmHoverCardState = class {
+	direction = signal("ltr", ...ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []);
+	resolvedSide = signal("bottom", ...ngDevMode ? [{ debugName: "resolvedSide" }] : /* istanbul ignore next */ []);
+	destroyed = false;
+};
+var RaqmHoverCardComponent = class RaqmHoverCardComponent {
+	overlay = inject(Overlay);
+	document = inject(DOCUMENT);
+	host = inject(ElementRef);
+	container = inject(ViewContainerRef);
+	injector = inject(Injector);
+	checker = inject(InteractivityChecker);
+	panel = viewChild("panel", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	openValue = model(void 0, {
+		...ngDevMode ? { debugName: "openValue" } : /* istanbul ignore next */ {},
+		alias: "open"
+	});
+	defaultOpen = input(false, {
+		...ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	side = input(DEFAULT_SIDE, ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	align = input(DEFAULT_ALIGN, ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	sideOffset = input(4, {
+		...ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	alignOffset = input(4, {
+		...ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	open = computed(() => this.openValue() ?? this.defaultOpen(), ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	trigger = signal(null, ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	content = signal(null, ...ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []);
+	state = new RaqmHoverCardState();
+	direction = this.state.direction;
+	resolvedSide = this.state.resolvedSide;
+	positionController = new RaqmHoverCardPosition({
+		side: () => this.side(),
+		align: () => this.align(),
+		sideOffset: () => this.sideOffset(),
+		alignOffset: () => this.alignOffset(),
+		direction: () => this.state.direction()
+	});
+	layer = new RaqmHoverCardOverlay(this.overlay, this.state, this.positionController, {
+		root: this.host.nativeElement,
+		document: this.document,
+		container: this.container,
+		injector: this.injector,
+		trigger: () => this.trigger(),
+		panel: () => this.panel(),
+		close: () => this.close(),
+		listenEscape: () => this.intent.listenEscape(),
+		releaseIntent: () => this.intent.release()
+	});
+	keyboard = new RaqmHoverCardKeyboard(this.checker, {
+		document: this.document,
+		trigger: () => this.trigger(),
+		overlayRef: () => this.layer.ref
+	});
+	intent = new RaqmHoverCardIntent({
+		document: this.document,
+		open: () => this.open(),
+		setOpen: (value) => this.openValue.set(value),
+		destroyed: () => this.state.destroyed,
+		trigger: () => this.trigger(),
+		overlay: () => this.layer,
+		side: () => this.state.resolvedSide(),
+		detach: () => this.layer.detach()
+	});
+	constructor() {
+		connectHoverCardEffects({
+			open: () => this.open(),
+			trigger: () => this.trigger(),
+			content: () => this.content(),
+			panel: () => this.panel(),
+			side: () => this.side(),
+			align: () => this.align(),
+			sideOffset: () => this.sideOffset(),
+			alignOffset: () => this.alignOffset(),
+			attach: () => this.layer.attach(),
+			positionPane: () => this.layer.positionPane(),
+			detach: () => this.layer.detach()
+		});
+	}
+	registerTrigger(trigger) {
+		if (this.trigger()) throw new Error("Only one Hover Card trigger is supported per root.");
+		this.trigger.set(trigger);
+	}
+	unregisterTrigger(trigger) {
+		if (this.trigger() === trigger) {
+			this.close();
+			this.trigger.set(null);
+		}
+	}
+	registerContent(content) {
+		if (this.content()) throw new Error("Only one Hover Card content template is supported per root.");
+		this.content.set(content);
+	}
+	unregisterContent(content) {
+		if (this.content() === content) {
+			this.close();
+			this.content.set(null);
+		}
+	}
+	requestOpen(fromFocus = false) {
+		this.intent.requestOpen(fromFocus);
+	}
+	close() {
+		this.intent.close();
+	}
+	focusOut(event) {
+		this.intent.focusOut(event);
+	}
+	triggerKeydown(event) {
+		this.keyboard.onTriggerKeydown(event);
+	}
+	panelKeydown(event) {
+		this.keyboard.onPanelKeydown(event);
+	}
+	pointerEnter(event) {
+		this.intent.pointerEnter(event);
+	}
+	contentFocus() {
+		this.intent.contentFocus();
+	}
+	pointerLeave(event) {
+		this.intent.pointerLeave(event);
+	}
+	ngOnDestroy() {
+		this.layer.destroy();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmHoverCardComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: RaqmHoverCardComponent,
+		isStandalone: true,
+		selector: "raqm-hover-card",
+		inputs: {
+			openValue: {
+				classPropertyName: "openValue",
+				publicName: "open",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			defaultOpen: {
+				classPropertyName: "defaultOpen",
+				publicName: "defaultOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sideOffset: {
+				classPropertyName: "sideOffset",
+				publicName: "sideOffset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			alignOffset: {
+				classPropertyName: "alignOffset",
+				publicName: "alignOffset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { openValue: "openChange" },
+		viewQueries: [{
+			propertyName: "panel",
+			first: true,
+			predicate: ["panel"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ng-content />\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-hover-card-content\"\r\n    tabindex=\"-1\"\r\n    [dir]=\"direction()\"\r\n    [attr.data-raqm-side]=\"resolvedSide()\"\r\n    (pointerenter)=\"pointerEnter($event)\"\r\n    (pointerleave)=\"pointerLeave($event)\"\r\n    (focusout)=\"focusOut($event)\"\r\n    (focusin)=\"contentFocus()\"\r\n    (keydown)=\"panelKeydown($event)\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content()?.template ?? null\" />\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [":host{display:contents}.raqm-hover-card-content{box-sizing:border-box;inline-size:calc(var(--raqm-spacing) * 64);max-inline-size:calc(100vw - 10px);max-block-size:calc(100dvh - 10px);overflow:auto;padding:calc(var(--raqm-spacing) * 2.5);border-radius:var(--raqm-radius-lg);background:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;outline:none;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent),var(--raqm-shadow-md)}.raqm-hover-card-content[data-raqm-side=bottom]{--raqm-hover-card-slide: translateY(-.5rem)}.raqm-hover-card-content[data-raqm-side=top]{--raqm-hover-card-slide: translateY(.5rem)}.raqm-hover-card-content[data-raqm-side=left]{--raqm-hover-card-slide: translateX(.5rem)}.raqm-hover-card-content[data-raqm-side=right]{--raqm-hover-card-slide: translateX(-.5rem)}.raqm-hover-card-content--entering{animation:raqm-hover-card-in var(--raqm-duration-fast) var(--raqm-ease-out)}.raqm-hover-card-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast),transform var(--raqm-duration-fast)}@keyframes raqm-hover-card-in{0%{opacity:0;transform:var(--raqm-hover-card-slide, none) scale(.95)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.raqm-hover-card-content{animation:none;transition:none}}@media(forced-colors:active){.raqm-hover-card-content{border:1px solid CanvasText}}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmHoverCardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-hover-card",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-content />\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-hover-card-content\"\r\n    tabindex=\"-1\"\r\n    [dir]=\"direction()\"\r\n    [attr.data-raqm-side]=\"resolvedSide()\"\r\n    (pointerenter)=\"pointerEnter($event)\"\r\n    (pointerleave)=\"pointerLeave($event)\"\r\n    (focusout)=\"focusOut($event)\"\r\n    (focusin)=\"contentFocus()\"\r\n    (keydown)=\"panelKeydown($event)\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content()?.template ?? null\" />\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [":host{display:contents}.raqm-hover-card-content{box-sizing:border-box;inline-size:calc(var(--raqm-spacing) * 64);max-inline-size:calc(100vw - 10px);max-block-size:calc(100dvh - 10px);overflow:auto;padding:calc(var(--raqm-spacing) * 2.5);border-radius:var(--raqm-radius-lg);background:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;outline:none;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent),var(--raqm-shadow-md)}.raqm-hover-card-content[data-raqm-side=bottom]{--raqm-hover-card-slide: translateY(-.5rem)}.raqm-hover-card-content[data-raqm-side=top]{--raqm-hover-card-slide: translateY(.5rem)}.raqm-hover-card-content[data-raqm-side=left]{--raqm-hover-card-slide: translateX(.5rem)}.raqm-hover-card-content[data-raqm-side=right]{--raqm-hover-card-slide: translateX(-.5rem)}.raqm-hover-card-content--entering{animation:raqm-hover-card-in var(--raqm-duration-fast) var(--raqm-ease-out)}.raqm-hover-card-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast),transform var(--raqm-duration-fast)}@keyframes raqm-hover-card-in{0%{opacity:0;transform:var(--raqm-hover-card-slide, none) scale(.95)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.raqm-hover-card-content{animation:none;transition:none}}@media(forced-colors:active){.raqm-hover-card-content{border:1px solid CanvasText}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		panel: [{
+			type: i0.ViewChild,
+			args: ["panel", { isSignal: true }]
+		}],
+		openValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		defaultOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultOpen",
+				required: false
+			}]
+		}],
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		sideOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideOffset",
+				required: false
+			}]
+		}],
+		alignOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "alignOffset",
+				required: false
+			}]
+		}]
+	}
+});
+function delay(fallback) {
+	return (value) => {
+		const parsed = numberAttribute(value, fallback);
+		return Number.isFinite(parsed) ? Math.max(0, parsed) : fallback;
+	};
+}
+var RaqmHoverCardTriggerDirective = class RaqmHoverCardTriggerDirective {
+	element = inject(ElementRef).nativeElement;
+	card = inject(RaqmHoverCardComponent);
+	delay = input(600, {
+		...ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {},
+		transform: delay(600)
+	});
+	closeDelay = input(300, {
+		...ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {},
+		transform: delay(300)
+	});
+	constructor() {
+		if (this.element instanceof HTMLButtonElement && !this.element.hasAttribute("type")) this.element.setAttribute("type", "button");
+		this.card.registerTrigger(this);
+		inject(DestroyRef).onDestroy(() => this.card.unregisterTrigger(this));
+	}
+	enter(event) {
+		if (event.pointerType === "mouse") this.card.requestOpen();
+	}
+	leave(event) {
+		const pointer = event;
+		if (pointer.pointerType === "mouse") this.card.pointerLeave(pointer);
+	}
+	blur(event) {
+		this.card.focusOut(event);
+	}
+	keydown(event) {
+		this.card.triggerKeydown(event);
+	}
+	focus() {
+		if (this.element.matches(":focus-visible")) this.card.requestOpen(true);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmHoverCardTriggerDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmHoverCardTriggerDirective,
+		isStandalone: true,
+		selector: "a[raqm-hover-card-trigger], button[raqm-hover-card-trigger]",
+		inputs: {
+			delay: {
+				classPropertyName: "delay",
+				publicName: "delay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeDelay: {
+				classPropertyName: "closeDelay",
+				publicName: "closeDelay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { listeners: {
+			"pointerenter": "enter($event)",
+			"pointerleave": "leave($event)",
+			"focus": "focus()",
+			"blur": "blur($event)",
+			"keydown": "keydown($event)"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmHoverCardTriggerDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "a[raqm-hover-card-trigger], button[raqm-hover-card-trigger]",
+			host: {
+				"(pointerenter)": "enter($event)",
+				"(pointerleave)": "leave($event)",
+				"(focus)": "focus()",
+				"(blur)": "blur($event)",
+				"(keydown)": "keydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		delay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "delay",
+				required: false
+			}]
+		}],
+		closeDelay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeDelay",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmHoverCardContentDirective = class RaqmHoverCardContentDirective {
+	template = inject(TemplateRef);
+	card = inject(RaqmHoverCardComponent);
+	constructor() {
+		this.card.registerContent(this);
+		inject(DestroyRef).onDestroy(() => this.card.unregisterContent(this));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmHoverCardContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmHoverCardContentDirective,
+		isStandalone: true,
+		selector: "ng-template[raqm-hover-card-content]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmHoverCardContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[raqm-hover-card-content]" }]
+	}],
+	ctorParameters: () => []
+});
+const RaqmHoverCard = [
+	RaqmHoverCardComponent,
+	RaqmHoverCardTriggerDirective,
+	RaqmHoverCardContentDirective
+];
+export { RaqmHoverCard, RaqmHoverCardComponent, RaqmHoverCardContentDirective, RaqmHoverCardTriggerDirective };
+
+//# sourceMappingURL=raqm-ui-hover-card.mjs.map