@hyalo/angular 0.0.0-stage → 0.1.0

package/fesm2022/hyalo-angular-interaction.mjs

@@ -0,0 +1,455 @@
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, afterNextRender, booleanAttribute, inject, input, numberAttribute } from "@angular/core";
+import { HyMotion, MOTION, ɵmatchesMedia } from "@hyalo/angular";
+var HyReveal = class HyReveal {
+	el = inject(ElementRef).nativeElement;
+	motion = inject(HyMotion);
+	revealDelay = input(0, {
+		...ngDevMode ? { debugName: "revealDelay" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	revealFrom = input("up", ...ngDevMode ? [{ debugName: "revealFrom" }] : /* istanbul ignore next */ []);
+	revealRepeat = input(false, {
+		...ngDevMode ? { debugName: "revealRepeat" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			if (this.motion.reduced() || typeof IntersectionObserver !== "function") return;
+			let first = true;
+			const observer = new IntersectionObserver(([entry]) => {
+				if (!entry) return;
+				if (first) {
+					first = false;
+					if (entry.isIntersecting) {
+						if (!this.revealRepeat()) observer.disconnect();
+						return;
+					}
+					this.el.setAttribute("data-hy-reveal-from", this.revealFrom());
+					this.el.setAttribute("data-hy-reveal", "hidden");
+					return;
+				}
+				if (entry.isIntersecting) {
+					this.el.setAttribute("data-hy-reveal", "shown");
+					if (!this.revealRepeat()) observer.disconnect();
+				} else if (this.revealRepeat()) this.el.setAttribute("data-hy-reveal", "hidden");
+			}, { rootMargin: "0px 0px -8% 0px" });
+			observer.observe(this.el);
+			destroyRef.onDestroy(() => observer.disconnect());
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyReveal,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyReveal,
+		isStandalone: true,
+		selector: "[hyReveal]",
+		inputs: {
+			revealDelay: {
+				classPropertyName: "revealDelay",
+				publicName: "revealDelay",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			revealFrom: {
+				classPropertyName: "revealFrom",
+				publicName: "revealFrom",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			revealRepeat: {
+				classPropertyName: "revealRepeat",
+				publicName: "revealRepeat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "style.--hy-reveal-delay.ms": "revealDelay()" } },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyReveal,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyReveal]",
+			host: { "[style.--hy-reveal-delay.ms]": "revealDelay()" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		revealDelay: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "revealDelay",
+				required: false
+			}]
+		}],
+		revealFrom: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "revealFrom",
+				required: false
+			}]
+		}],
+		revealRepeat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "revealRepeat",
+				required: false
+			}]
+		}]
+	}
+});
+function bindPointer(handlers) {
+	const host = inject(ElementRef).nativeElement;
+	const motion = inject(HyMotion);
+	const destroyRef = inject(DestroyRef);
+	afterNextRender(() => {
+		if (!ɵmatchesMedia("(hover: hover) and (pointer: fine)")) return;
+		const h = handlers();
+		let rect = null;
+		let active = false;
+		const enter = (event) => {
+			if (!motion.enabled() || event.pointerType === "touch") return;
+			active = true;
+			rect = host.getBoundingClientRect();
+			h.enter?.(event, rect);
+		};
+		const move = (event) => {
+			if (!active) return enter(event);
+			if (!rect) return;
+			h.move(event, rect);
+		};
+		const leave = () => {
+			if (!active) return;
+			active = false;
+			rect = null;
+			h.leave?.();
+		};
+		host.addEventListener("pointerenter", enter, { passive: true });
+		host.addEventListener("pointermove", move, { passive: true });
+		host.addEventListener("pointerleave", leave, { passive: true });
+		destroyRef.onDestroy(() => {
+			host.removeEventListener("pointerenter", enter);
+			host.removeEventListener("pointermove", move);
+			host.removeEventListener("pointerleave", leave);
+		});
+	});
+}
+function cssVarSetter(el, name, unit, motion, vars) {
+	let quick = null;
+	motion.gsap().then((gsap) => {
+		if (!gsap) return;
+		el.classList.add("hy-gsap");
+		quick = gsap.quickTo(el, name, {
+			...vars,
+			unit
+		});
+	});
+	return (value) => {
+		if (quick) quick(value);
+		else el.style.setProperty(name, `${value}${unit}`);
+	};
+}
+var HyTilt = class HyTilt {
+	el = inject(ElementRef).nativeElement;
+	motion = inject(HyMotion);
+	tiltMax = input(6, {
+		...ngDevMode ? { debugName: "tiltMax" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	tiltGlow = input(true, {
+		...ngDevMode ? { debugName: "tiltGlow" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	constructor() {
+		bindPointer(() => {
+			const vars = {
+				duration: MOTION.settle.duration,
+				ease: MOTION.settle.ease
+			};
+			const rx = cssVarSetter(this.el, "--hy-rx", "deg", this.motion, vars);
+			const ry = cssVarSetter(this.el, "--hy-ry", "deg", this.motion, vars);
+			return {
+				enter: () => {
+					if (this.tiltGlow()) this.el.style.setProperty("--hy-glow", "0.32");
+				},
+				move: (event, rect) => {
+					const x = (event.clientX - rect.left) / rect.width;
+					const y = (event.clientY - rect.top) / rect.height;
+					const max = this.tiltMax();
+					ry((x - .5) * 2 * max);
+					rx((.5 - y) * 2 * max);
+					this.el.style.setProperty("--hy-px", `${(x * 100).toFixed(1)}%`);
+					this.el.style.setProperty("--hy-py", `${(y * 100).toFixed(1)}%`);
+				},
+				leave: () => {
+					rx(0);
+					ry(0);
+					this.el.style.setProperty("--hy-glow", "0");
+				}
+			};
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyTilt,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyTilt,
+		isStandalone: true,
+		selector: "[hyTilt]",
+		inputs: {
+			tiltMax: {
+				classPropertyName: "tiltMax",
+				publicName: "tiltMax",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tiltGlow: {
+				classPropertyName: "tiltGlow",
+				publicName: "tiltGlow",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "hy-tilt" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyTilt,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyTilt]",
+			host: { class: "hy-tilt" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		tiltMax: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tiltMax",
+				required: false
+			}]
+		}],
+		tiltGlow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tiltGlow",
+				required: false
+			}]
+		}]
+	}
+});
+var HyMagnetic = class HyMagnetic {
+	el = inject(ElementRef).nativeElement;
+	motion = inject(HyMotion);
+	magneticStrength = input(.3, {
+		...ngDevMode ? { debugName: "magneticStrength" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	magneticMax = input(10, {
+		...ngDevMode ? { debugName: "magneticMax" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	constructor() {
+		bindPointer(() => {
+			const vars = {
+				duration: MOTION.settle.duration,
+				ease: MOTION.settle.ease
+			};
+			const mx = cssVarSetter(this.el, "--hy-mx", "px", this.motion, vars);
+			const my = cssVarSetter(this.el, "--hy-my", "px", this.motion, vars);
+			const clamp = (v) => Math.max(-this.magneticMax(), Math.min(this.magneticMax(), v));
+			return {
+				move: (event, rect) => {
+					const strength = this.magneticStrength();
+					mx(clamp((event.clientX - rect.left - rect.width / 2) * strength));
+					my(clamp((event.clientY - rect.top - rect.height / 2) * strength));
+				},
+				leave: () => {
+					mx(0);
+					my(0);
+				}
+			};
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyMagnetic,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyMagnetic,
+		isStandalone: true,
+		selector: "[hyMagnetic]",
+		inputs: {
+			magneticStrength: {
+				classPropertyName: "magneticStrength",
+				publicName: "magneticStrength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			magneticMax: {
+				classPropertyName: "magneticMax",
+				publicName: "magneticMax",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "hy-magnetic" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyMagnetic,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyMagnetic]",
+			host: { class: "hy-magnetic" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		magneticStrength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "magneticStrength",
+				required: false
+			}]
+		}],
+		magneticMax: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "magneticMax",
+				required: false
+			}]
+		}]
+	}
+});
+var HyRipple = class HyRipple {
+	el = inject(ElementRef).nativeElement;
+	motion = inject(HyMotion);
+	rippleDisabled = input(false, {
+		...ngDevMode ? { debugName: "rippleDisabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		afterNextRender(() => {
+			const down = (event) => {
+				if (this.rippleDisabled() || this.motion.reduced() || event.button !== 0) return;
+				const rect = this.el.getBoundingClientRect();
+				const size = Math.hypot(rect.width, rect.height) * 2;
+				const wave = this.el.ownerDocument.createElement("span");
+				wave.className = "hy-ripple";
+				wave.setAttribute("aria-hidden", "true");
+				wave.style.setProperty("--hy-ripple-size", `${size}px`);
+				wave.style.setProperty("--hy-ripple-x", `${event.clientX - rect.left}px`);
+				wave.style.setProperty("--hy-ripple-y", `${event.clientY - rect.top}px`);
+				wave.addEventListener("animationend", () => wave.remove(), { once: true });
+				this.el.appendChild(wave);
+			};
+			this.el.addEventListener("pointerdown", down, { passive: true });
+			destroyRef.onDestroy(() => this.el.removeEventListener("pointerdown", down));
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyRipple,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyRipple,
+		isStandalone: true,
+		selector: "[hyRipple]",
+		inputs: { rippleDisabled: {
+			classPropertyName: "rippleDisabled",
+			publicName: "rippleDisabled",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { classAttribute: "hy-ripple-host" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyRipple,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyRipple]",
+			host: { class: "hy-ripple-host" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { rippleDisabled: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "rippleDisabled",
+			required: false
+		}]
+	}] }
+});
+export { HyMagnetic, HyReveal, HyRipple, HyTilt };
+
+//# sourceMappingURL=hyalo-angular-interaction.mjs.map

package/fesm2022/hyalo-angular-interaction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-interaction.mjs","names":["matchesMedia"],"sources":["../../../projects/hyalo/interaction/reveal.ts","../../../projects/hyalo/interaction/pointer.ts","../../../projects/hyalo/interaction/tilt.ts","../../../projects/hyalo/interaction/magnetic.ts","../../../projects/hyalo/interaction/ripple.ts"],"sourcesContent":["import {\r\n  DestroyRef,\r\n  Directive,\r\n  ElementRef,\r\n  afterNextRender,\r\n  booleanAttribute,\r\n  inject,\r\n  input,\r\n  numberAttribute,\r\n} from '@angular/core';\r\nimport { HyMotion } from '@hyalo/angular';\r\n\r\n/** Where a revealed element comes from. */\r\nexport type HyRevealFrom = 'up' | 'fade' | 'scale';\r\n\r\n/**\r\n * Fades and lifts an element in when it scrolls into view.\r\n *\r\n * ```html\r\n * @for (item of items; track item.id; let i = $index) {\r\n *   <article hyReveal [revealDelay]=\"i * 60\">...</article>\r\n * }\r\n * ```\r\n *\r\n * Content is never hidden by default. The directive only hides an element\r\n * after hydration, only when it is below the fold, and only when motion is\r\n * enabled. Elements already on screen are left alone, so server-rendered\r\n * content does not flash. CSS transitions do the work, so it also runs on the\r\n * low tier when reduced motion is off.\r\n *\r\n * Put it on the glass element itself (`<hy-card hyReveal>`), not on a\r\n * wrapper around glass. While a wrapper fades, its glass children cannot\r\n * blur what is behind it, and the blur snaps in when the fade ends.\r\n */\r\n@Directive({\r\n  selector: '[hyReveal]',\r\n  host: { '[style.--hy-reveal-delay.ms]': 'revealDelay()' },\r\n})\r\nexport class HyReveal {\r\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  private readonly motion = inject(HyMotion);\r\n\r\n  /** Delay in milliseconds, for staggering. */\r\n  readonly revealDelay = input(0, { transform: numberAttribute });\r\n  /** The starting pose. */\r\n  readonly revealFrom = input<HyRevealFrom>('up');\r\n  /** Reveal again each time the element re-enters the viewport. */\r\n  readonly revealRepeat = input(false, { transform: booleanAttribute });\r\n\r\n  constructor() {\r\n    const destroyRef = inject(DestroyRef);\r\n    afterNextRender(() => {\r\n      if (this.motion.reduced() || typeof IntersectionObserver !== 'function') return;\r\n      let first = true;\r\n      const observer = new IntersectionObserver(\r\n        ([entry]) => {\r\n          if (!entry) return;\r\n          if (first) {\r\n            first = false;\r\n            if (entry.isIntersecting) {\r\n              if (!this.revealRepeat()) observer.disconnect();\r\n              return;\r\n            }\r\n            this.el.setAttribute('data-hy-reveal-from', this.revealFrom());\r\n            this.el.setAttribute('data-hy-reveal', 'hidden');\r\n            return;\r\n          }\r\n          if (entry.isIntersecting) {\r\n            this.el.setAttribute('data-hy-reveal', 'shown');\r\n            if (!this.revealRepeat()) observer.disconnect();\r\n          } else if (this.revealRepeat()) {\r\n            this.el.setAttribute('data-hy-reveal', 'hidden');\r\n          }\r\n        },\r\n        { rootMargin: '0px 0px -8% 0px' },\r\n      );\r\n      observer.observe(this.el);\r\n      destroyRef.onDestroy(() => observer.disconnect());\r\n    });\r\n  }\r\n}\r\n","import { DestroyRef, ElementRef, afterNextRender, inject } from '@angular/core';\r\nimport { HyMotion, ɵmatchesMedia as matchesMedia } from '@hyalo/angular';\r\n\r\n/** Handlers that run outside change detection. */\r\nexport interface PointerHandlers {\r\n  enter?(event: PointerEvent, rect: DOMRect): void;\r\n  move(event: PointerEvent, rect: DOMRect): void;\r\n  leave?(): void;\r\n}\r\n\r\n/**\r\n * Wires pointer listeners straight to the DOM, so high-frequency\r\n * `pointermove` events never schedule change detection. Listeners are only\r\n * attached on devices with a fine pointer, and they do nothing while motion\r\n * is disabled.\r\n */\r\nexport function bindPointer(handlers: () => PointerHandlers): void {\r\n  const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  const motion = inject(HyMotion);\r\n  const destroyRef = inject(DestroyRef);\r\n\r\n  afterNextRender(() => {\r\n    if (!matchesMedia('(hover: hover) and (pointer: fine)')) return;\r\n    const h = handlers();\r\n    let rect: DOMRect | null = null;\r\n    let active = false;\r\n\r\n    const enter = (event: PointerEvent): void => {\r\n      if (!motion.enabled() || event.pointerType === 'touch') return;\r\n      active = true;\r\n      rect = host.getBoundingClientRect();\r\n      h.enter?.(event, rect);\r\n    };\r\n    const move = (event: PointerEvent): void => {\r\n      if (!active) return enter(event);\r\n      if (!rect) return;\r\n      h.move(event, rect);\r\n    };\r\n    const leave = (): void => {\r\n      if (!active) return;\r\n      active = false;\r\n      rect = null;\r\n      h.leave?.();\r\n    };\r\n\r\n    host.addEventListener('pointerenter', enter, { passive: true });\r\n    host.addEventListener('pointermove', move, { passive: true });\r\n    host.addEventListener('pointerleave', leave, { passive: true });\r\n    destroyRef.onDestroy(() => {\r\n      host.removeEventListener('pointerenter', enter);\r\n      host.removeEventListener('pointermove', move);\r\n      host.removeEventListener('pointerleave', leave);\r\n    });\r\n  });\r\n}\r\n\r\n/**\r\n * Returns a setter for one CSS custom property. Uses GSAP `quickTo` when GSAP\r\n * is available, so values glide, and a plain `style.setProperty` otherwise,\r\n * where a CSS transition does the smoothing.\r\n */\r\nexport function cssVarSetter(\r\n  el: HTMLElement,\r\n  name: string,\r\n  unit: string,\r\n  motion: HyMotion,\r\n  vars: Record<string, unknown>,\r\n): (value: number) => void {\r\n  let quick: ((value: number) => unknown) | null = null;\r\n  void motion.gsap().then((gsap) => {\r\n    if (!gsap) return;\r\n    el.classList.add('hy-gsap');\r\n    quick = gsap.quickTo(el, name, { ...vars, unit });\r\n  });\r\n  return (value) => {\r\n    if (quick) quick(value);\r\n    else el.style.setProperty(name, `${value}${unit}`);\r\n  };\r\n}\r\n","import {\r\n  Directive,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  inject,\r\n  input,\r\n  numberAttribute,\r\n} from '@angular/core';\r\nimport { HyMotion, MOTION } from '@hyalo/angular';\r\n\r\nimport { bindPointer, cssVarSetter } from './pointer';\r\n\r\n/**\r\n * Tilts the element toward the cursor and moves a soft glow under it.\r\n *\r\n * ```html\r\n * <hy-card hyTilt [tiltMax]=\"8\">...</hy-card>\r\n * ```\r\n *\r\n * Runs only with a fine pointer, with motion enabled and above the low\r\n * fidelity tier. The glow uses `--hy-px`, `--hy-py` and `--hy-glow`, which the\r\n * glass material already reads.\r\n */\r\n@Directive({\r\n  selector: '[hyTilt]',\r\n  host: { class: 'hy-tilt' },\r\n})\r\nexport class HyTilt {\r\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  private readonly motion = inject(HyMotion);\r\n\r\n  /** Maximum rotation in degrees. */\r\n  readonly tiltMax = input(6, { transform: numberAttribute });\r\n  /** Whether to show the pointer glow. */\r\n  readonly tiltGlow = input(true, { transform: booleanAttribute });\r\n\r\n  constructor() {\r\n    bindPointer(() => {\r\n      const vars = { duration: MOTION.settle.duration, ease: MOTION.settle.ease };\r\n      const rx = cssVarSetter(this.el, '--hy-rx', 'deg', this.motion, vars);\r\n      const ry = cssVarSetter(this.el, '--hy-ry', 'deg', this.motion, vars);\r\n      return {\r\n        enter: () => {\r\n          if (this.tiltGlow()) this.el.style.setProperty('--hy-glow', '0.32');\r\n        },\r\n        move: (event, rect) => {\r\n          const x = (event.clientX - rect.left) / rect.width;\r\n          const y = (event.clientY - rect.top) / rect.height;\r\n          const max = this.tiltMax();\r\n          ry((x - 0.5) * 2 * max);\r\n          rx((0.5 - y) * 2 * max);\r\n          this.el.style.setProperty('--hy-px', `${(x * 100).toFixed(1)}%`);\r\n          this.el.style.setProperty('--hy-py', `${(y * 100).toFixed(1)}%`);\r\n        },\r\n        leave: () => {\r\n          rx(0);\r\n          ry(0);\r\n          this.el.style.setProperty('--hy-glow', '0');\r\n        },\r\n      };\r\n    });\r\n  }\r\n}\r\n","import { Directive, ElementRef, inject, input, numberAttribute } from '@angular/core';\r\nimport { HyMotion, MOTION } from '@hyalo/angular';\r\n\r\nimport { bindPointer, cssVarSetter } from './pointer';\r\n\r\n/**\r\n * Pulls the element a little toward the cursor while it hovers.\r\n *\r\n * Uses the `translate` property, so it never fights with a `transform` the\r\n * element already has.\r\n */\r\n@Directive({\r\n  selector: '[hyMagnetic]',\r\n  host: { class: 'hy-magnetic' },\r\n})\r\nexport class HyMagnetic {\r\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  private readonly motion = inject(HyMotion);\r\n\r\n  /** How far the element follows the cursor, as a share of the distance. */\r\n  readonly magneticStrength = input(0.3, { transform: numberAttribute });\r\n  /** Upper limit for the offset in pixels. */\r\n  readonly magneticMax = input(10, { transform: numberAttribute });\r\n\r\n  constructor() {\r\n    bindPointer(() => {\r\n      const vars = { duration: MOTION.settle.duration, ease: MOTION.settle.ease };\r\n      const mx = cssVarSetter(this.el, '--hy-mx', 'px', this.motion, vars);\r\n      const my = cssVarSetter(this.el, '--hy-my', 'px', this.motion, vars);\r\n      const clamp = (v: number): number =>\r\n        Math.max(-this.magneticMax(), Math.min(this.magneticMax(), v));\r\n      return {\r\n        move: (event, rect) => {\r\n          const strength = this.magneticStrength();\r\n          mx(clamp((event.clientX - rect.left - rect.width / 2) * strength));\r\n          my(clamp((event.clientY - rect.top - rect.height / 2) * strength));\r\n        },\r\n        leave: () => {\r\n          mx(0);\r\n          my(0);\r\n        },\r\n      };\r\n    });\r\n  }\r\n}\r\n","import {\r\n  DestroyRef,\r\n  Directive,\r\n  ElementRef,\r\n  afterNextRender,\r\n  booleanAttribute,\r\n  inject,\r\n  input,\r\n} from '@angular/core';\r\nimport { HyMotion } from '@hyalo/angular';\r\n\r\n/**\r\n * A soft light ripple from the press point. Purely decorative: it is\r\n * skipped with reduced motion and never affects layout.\r\n */\r\n@Directive({\r\n  selector: '[hyRipple]',\r\n  host: { class: 'hy-ripple-host' },\r\n})\r\nexport class HyRipple {\r\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  private readonly motion = inject(HyMotion);\r\n\r\n  /** Turns the ripple off without removing the directive. */\r\n  readonly rippleDisabled = input(false, { transform: booleanAttribute });\r\n\r\n  constructor() {\r\n    const destroyRef = inject(DestroyRef);\r\n    afterNextRender(() => {\r\n      const down = (event: PointerEvent): void => {\r\n        if (this.rippleDisabled() || this.motion.reduced() || event.button !== 0) return;\r\n        const rect = this.el.getBoundingClientRect();\r\n        const size = Math.hypot(rect.width, rect.height) * 2;\r\n        const wave = this.el.ownerDocument.createElement('span');\r\n        wave.className = 'hy-ripple';\r\n        wave.setAttribute('aria-hidden', 'true');\r\n        wave.style.setProperty('--hy-ripple-size', `${size}px`);\r\n        wave.style.setProperty('--hy-ripple-x', `${event.clientX - rect.left}px`);\r\n        wave.style.setProperty('--hy-ripple-y', `${event.clientY - rect.top}px`);\r\n        wave.addEventListener('animationend', () => wave.remove(), { once: true });\r\n        this.el.appendChild(wave);\r\n      };\r\n      this.el.addEventListener('pointerdown', down, { passive: true });\r\n      destroyRef.onDestroy(() => this.el.removeEventListener('pointerdown', down));\r\n    });\r\n  }\r\n}\r\n"],"mappings":";;;AAsCA,IAAa,WAAb,MAAa,SAAQ;CACF,KAAK,OAAgC,UAAU,CAAC,CAAC;CACjD,SAAS,OAAO,QAAQ;CAGhC,cAAc,MAAM,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,cAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CAEnD,aAAa,MAAoB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEtC,eAAe,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,eAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAElE,cAAA;EACE,MAAM,aAAa,OAAO,UAAU;EACpC,sBAAqB;GACnB,IAAI,KAAK,OAAO,QAAO,KAAM,OAAO,yBAAyB,YAAY;GACzE,IAAI,QAAQ;GACZ,MAAM,WAAW,IAAI,sBAClB,CAAC,WAAU;IACV,IAAI,CAAC,OAAO;IACZ,IAAI,OAAO;KACT,QAAQ;KACR,IAAI,MAAM,gBAAgB;MACxB,IAAI,CAAC,KAAK,aAAY,GAAI,SAAS,WAAU;MAC7C;KACF;KACA,KAAK,GAAG,aAAa,uBAAuB,KAAK,WAAU,CAAE;KAC7D,KAAK,GAAG,aAAa,kBAAkB,QAAQ;KAC/C;IACF;IACA,IAAI,MAAM,gBAAgB;KACxB,KAAK,GAAG,aAAa,kBAAkB,OAAO;KAC9C,IAAI,CAAC,KAAK,aAAY,GAAI,SAAS,WAAU;IAC/C,OAAO,IAAI,KAAK,aAAY,GAC1B,KAAK,GAAG,aAAa,kBAAkB,QAAQ;GAEnD,GACA,EAAE,YAAY,kBAAiB,CAAE;GAEnC,SAAS,QAAQ,KAAK,EAAE;GACxB,WAAW,gBAAgB,SAAS,WAAU,CAAE;EAClD,CAAC;CACH;CAzCW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,8BAAA,gBAAA,EAAA;EAAA,UAAA;CAAA,CAAA;;AAAR,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EAJpB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM,EAAE,gCAAgC,gBAAe;EACxD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrBD,SAAgB,YAAY,UAA+B;CACzD,MAAM,OAAO,OAAgC,UAAU,CAAC,CAAC;CACzD,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,aAAa,OAAO,UAAU;CAEpC,sBAAqB;EACnB,IAAI,CAACA,cAAa,oCAAoC,GAAG;EACzD,MAAM,IAAI,SAAQ;EAClB,IAAI,OAAuB;EAC3B,IAAI,SAAS;EAEb,MAAM,SAAS,UAA6B;GAC1C,IAAI,CAAC,OAAO,QAAO,KAAM,MAAM,gBAAgB,SAAS;GACxD,SAAS;GACT,OAAO,KAAK,sBAAqB;GACjC,EAAE,QAAQ,OAAO,IAAI;EACvB;EACA,MAAM,QAAQ,UAA6B;GACzC,IAAI,CAAC,QAAQ,OAAO,MAAM,KAAK;GAC/B,IAAI,CAAC,MAAM;GACX,EAAE,KAAK,OAAO,IAAI;EACpB;EACA,MAAM,cAAmB;GACvB,IAAI,CAAC,QAAQ;GACb,SAAS;GACT,OAAO;GACP,EAAE,QAAO;EACX;EAEA,KAAK,iBAAiB,gBAAgB,OAAO,EAAE,SAAS,KAAI,CAAE;EAC9D,KAAK,iBAAiB,eAAe,MAAM,EAAE,SAAS,KAAI,CAAE;EAC5D,KAAK,iBAAiB,gBAAgB,OAAO,EAAE,SAAS,KAAI,CAAE;EAC9D,WAAW,gBAAe;GACxB,KAAK,oBAAoB,gBAAgB,KAAK;GAC9C,KAAK,oBAAoB,eAAe,IAAI;GAC5C,KAAK,oBAAoB,gBAAgB,KAAK;EAChD,CAAC;CACH,CAAC;AACH;AAOA,SAAgB,aACd,IACA,MACA,MACA,QACA,MAA6B;CAE7B,IAAI,QAA6C;CACjD,AAAK,OAAO,KAAI,CAAE,CAAC,MAAM,SAAQ;EAC/B,IAAI,CAAC,MAAM;EACX,GAAG,UAAU,IAAI,SAAS;EAC1B,QAAQ,KAAK,QAAQ,IAAI,MAAM;GAAE,GAAG;GAAM;EAAI,CAAE;CAClD,CAAC;CACD,QAAQ,UAAS;EACf,IAAI,OAAO,MAAM,KAAK;OACjB,GAAG,MAAM,YAAY,MAAM,GAAG,QAAQ,MAAM;CACnD;AACF;ACnDA,IAAa,SAAb,MAAa,OAAM;CACA,KAAK,OAAgC,UAAU,CAAC,CAAC;CACjD,SAAS,OAAO,QAAQ;CAGhC,UAAU,MAAM,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CAE/C,WAAW,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,WAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAE7D,cAAA;EACE,kBAAiB;GACf,MAAM,OAAO;IAAE,UAAU,OAAO,OAAO;IAAU,MAAM,OAAO,OAAO;GAAI;GACzE,MAAM,KAAK,aAAa,KAAK,IAAI,WAAW,OAAO,KAAK,QAAQ,IAAI;GACpE,MAAM,KAAK,aAAa,KAAK,IAAI,WAAW,OAAO,KAAK,QAAQ,IAAI;GACpE,OAAO;IACL,aAAY;KACV,IAAI,KAAK,SAAQ,GAAI,KAAK,GAAG,MAAM,YAAY,aAAa,MAAM;IACpE;IACA,OAAO,OAAO,SAAQ;KACpB,MAAM,KAAK,MAAM,UAAU,KAAK,QAAQ,KAAK;KAC7C,MAAM,KAAK,MAAM,UAAU,KAAK,OAAO,KAAK;KAC5C,MAAM,MAAM,KAAK,QAAO;KACxB,IAAI,IAAI,MAAO,IAAI,GAAG;KACtB,IAAI,KAAM,KAAK,IAAI,GAAG;KACtB,KAAK,GAAG,MAAM,YAAY,WAAW,IAAI,IAAI,IAAA,CAAK,QAAQ,CAAC,EAAC,EAAG;KAC/D,KAAK,GAAG,MAAM,YAAY,WAAW,IAAI,IAAI,IAAA,CAAK,QAAQ,CAAC,EAAC,EAAG;IACjE;IACA,aAAY;KACV,GAAG,CAAC;KACJ,GAAG,CAAC;KACJ,KAAK,GAAG,MAAM,YAAY,aAAa,GAAG;IAC5C;GACD;EACH,CAAC;CACH;CAlCW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAM,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAN,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAM,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,UAAA;EAAA,UAAA;CAAA,CAAA;;AAAN,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAJlB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM,EAAE,OAAO,UAAS;EACzB,CAAA;;;;;;;;;;;;;;;;;;;;;;ACXD,IAAa,aAAb,MAAa,WAAU;CACJ,KAAK,OAAgC,UAAU,CAAC,CAAC;CACjD,SAAS,OAAO,QAAQ;CAGhC,mBAAmB,MAAM,IAAG;EAAA,GAAA,YAAA,EAAA,WAAA,mBAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CAE1D,cAAc,MAAM,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,cAAA,+BAAA,CAAA;EAAI,WAAW;CAAe,CAAA;CAE7D,cAAA;EACE,kBAAiB;GACf,MAAM,OAAO;IAAE,UAAU,OAAO,OAAO;IAAU,MAAM,OAAO,OAAO;GAAI;GACzE,MAAM,KAAK,aAAa,KAAK,IAAI,WAAW,MAAM,KAAK,QAAQ,IAAI;GACnE,MAAM,KAAK,aAAa,KAAK,IAAI,WAAW,MAAM,KAAK,QAAQ,IAAI;GACnE,MAAM,SAAS,MACb,KAAK,IAAI,CAAC,KAAK,YAAW,GAAI,KAAK,IAAI,KAAK,YAAW,GAAI,CAAC,CAAC;GAC/D,OAAO;IACL,OAAO,OAAO,SAAQ;KACpB,MAAM,WAAW,KAAK,iBAAgB;KACtC,GAAG,OAAO,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ,KAAK,QAAQ,CAAC;KACjE,GAAG,OAAO,MAAM,UAAU,KAAK,MAAM,KAAK,SAAS,KAAK,QAAQ,CAAC;IACnE;IACA,aAAY;KACV,GAAG,CAAC;KACJ,GAAG,CAAC;IACN;GACD;EACH,CAAC;CACH;CA5BW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,gBAAA,cAAA;EAAA,UAAA;CAAA,CAAA;;AAAV,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAJtB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM,EAAE,OAAO,cAAa;EAC7B,CAAA;;;;;;;;;;;;;;;;;;;;;;ACKD,IAAa,WAAb,MAAa,SAAQ;CACF,KAAK,OAAgC,UAAU,CAAC,CAAC;CACjD,SAAS,OAAO,QAAQ;CAGhC,iBAAiB,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,iBAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAEpE,cAAA;EACE,MAAM,aAAa,OAAO,UAAU;EACpC,sBAAqB;GACnB,MAAM,QAAQ,UAA6B;IACzC,IAAI,KAAK,eAAc,KAAM,KAAK,OAAO,QAAO,KAAM,MAAM,WAAW,GAAG;IAC1E,MAAM,OAAO,KAAK,GAAG,sBAAqB;IAC1C,MAAM,OAAO,KAAK,MAAM,KAAK,OAAO,KAAK,MAAM,IAAI;IACnD,MAAM,OAAO,KAAK,GAAG,cAAc,cAAc,MAAM;IACvD,KAAK,YAAY;IACjB,KAAK,aAAa,eAAe,MAAM;IACvC,KAAK,MAAM,YAAY,oBAAoB,GAAG,KAAI,GAAI;IACtD,KAAK,MAAM,YAAY,iBAAiB,GAAG,MAAM,UAAU,KAAK,KAAI,GAAI;IACxE,KAAK,MAAM,YAAY,iBAAiB,GAAG,MAAM,UAAU,KAAK,IAAG,GAAI;IACvE,KAAK,iBAAiB,sBAAsB,KAAK,OAAM,GAAI,EAAE,MAAM,KAAI,CAAE;IACzE,KAAK,GAAG,YAAY,IAAI;GAC1B;GACA,KAAK,GAAG,iBAAiB,eAAe,MAAM,EAAE,SAAS,KAAI,CAAE;GAC/D,WAAW,gBAAgB,KAAK,GAAG,oBAAoB,eAAe,IAAI,CAAC;EAC7E,CAAC;CACH;CA1BW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAQ,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAR,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAQ,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,gBAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA,EAAA,gBAAA,iBAAA;EAAA,UAAA;CAAA,CAAA;;AAAR,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAQ,YAAA,CAAA;EAJpB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,MAAM,EAAE,OAAO,iBAAgB;EAChC,CAAA"}