@hyalo/angular 0.1.0 → 0.3.1

package/fesm2022/hyalo-angular-motion.mjs

@@ -0,0 +1,620 @@
+import * as i0 from "@angular/core";
+import { DOCUMENT, DestroyRef, Directive, ElementRef, Injectable, Injector, afterNextRender, computed, effect, inject, input, numberAttribute, signal } from "@angular/core";
+import { HY_CONFIG, HyFidelity, ɵinjectIsBrowser, ɵmatchesMedia } from "@hyalo/angular/core";
+const MOTION = {
+	settle: {
+		duration: .44,
+		ease: "power3.out",
+		css: "cubic-bezier(0.215, 0.61, 0.355, 1)"
+	},
+	pop: {
+		duration: .5,
+		ease: "back.out(1.5)",
+		css: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+	},
+	quick: {
+		duration: .22,
+		ease: "power2.out",
+		css: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
+	},
+	scene: {
+		duration: .9,
+		ease: "expo.out",
+		css: "cubic-bezier(0.16, 1, 0.3, 1)"
+	}
+};
+var HyMotion = class HyMotion {
+	config = inject(HY_CONFIG);
+	fidelity = inject(HyFidelity);
+	document = inject(DOCUMENT);
+	isBrowser = ɵinjectIsBrowser();
+	_reduced = signal(false, ...ngDevMode ? [{ debugName: "_reduced" }] : /* istanbul ignore next */ []);
+	gsapPromise;
+	reduced = this._reduced.asReadonly();
+	enabled = computed(() => !this._reduced() && this.fidelity.tier() !== "low", ...ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (!this.isBrowser || typeof matchMedia !== "function") return;
+		const query = matchMedia("(prefers-reduced-motion: reduce)");
+		const update = () => this._reduced.set(query.matches || this.document.documentElement.getAttribute("data-hy-motion") === "reduced");
+		update();
+		query.addEventListener("change", update);
+		inject(DestroyRef).onDestroy(() => query.removeEventListener("change", update));
+	}
+	setReduced(reduced) {
+		const root = this.document.documentElement;
+		if (reduced === null) {
+			root.removeAttribute("data-hy-motion");
+			this._reduced.set(ɵmatchesMedia("(prefers-reduced-motion: reduce)"));
+			return;
+		}
+		root.setAttribute("data-hy-motion", reduced ? "reduced" : "full");
+		this._reduced.set(reduced || ɵmatchesMedia("(prefers-reduced-motion: reduce)"));
+	}
+	gsap() {
+		const loader = this.config.gsap;
+		if (!this.isBrowser || !loader) return Promise.resolve(null);
+		this.gsapPromise ??= loader().catch(() => null);
+		return this.gsapPromise;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyMotion,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyMotion,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyMotion,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+const SPRINGS = {
+	settle: {
+		damping: 1,
+		response: .4
+	},
+	momentum: {
+		damping: .8,
+		response: .3
+	}
+};
+const STEP = 1 / 240;
+const MIN_RESPONSE = 1 / 60;
+const MAX_STEPS = 240;
+function assertFinite(value, name) {
+	if (!Number.isFinite(value)) throw new RangeError(`HySpring: ${name} must be finite.`);
+}
+const REST_DELTA = .1;
+const REST_VELOCITY = 2;
+var HySpring = class {
+	onUpdate;
+	value;
+	velocity = 0;
+	target = 0;
+	config = SPRINGS.settle;
+	onRest = null;
+	frame = 0;
+	last = 0;
+	constructor(initial, onUpdate) {
+		this.onUpdate = onUpdate;
+		assertFinite(initial, "initial value");
+		this.value = initial;
+	}
+	get running() {
+		return this.frame !== 0;
+	}
+	to(target, options = {}) {
+		const damping = options.damping ?? SPRINGS.settle.damping;
+		const response = options.response ?? SPRINGS.settle.response;
+		const velocity = options.velocity ?? this.velocity;
+		assertFinite(target, "target");
+		assertFinite(this.value, "current value");
+		assertFinite(velocity, "velocity");
+		if (!Number.isFinite(damping) || damping <= 0) throw new RangeError("HySpring: damping must be finite and greater than zero.");
+		if (!Number.isFinite(response) || response < MIN_RESPONSE) throw new RangeError("HySpring: response must be finite and at least 1/60 second.");
+		this.target = target;
+		this.config = {
+			damping,
+			response
+		};
+		this.velocity = velocity;
+		this.onRest = options.onRest ?? null;
+		if (this.frame) return;
+		this.last = -1;
+		this.frame = requestAnimationFrame(this.tick);
+	}
+	set(value) {
+		assertFinite(value, "value");
+		this.stop();
+		this.value = value;
+		this.velocity = 0;
+		this.onUpdate(value);
+	}
+	stop() {
+		cancelAnimationFrame(this.frame);
+		this.frame = 0;
+		this.onRest = null;
+	}
+	tick = (now) => {
+		const dt = this.last < 0 ? 1 / 60 : Math.max(0, Math.min((now - this.last) / 1e3, 1 / 15));
+		this.last = Math.max(now, this.last);
+		const stiffness = (2 * Math.PI / this.config.response) ** 2;
+		const friction = 4 * Math.PI * this.config.damping / this.config.response;
+		const steps = Math.max(1, Math.min(MAX_STEPS, Math.ceil(dt / Math.min(STEP, this.config.response / 60))));
+		const h = dt / steps;
+		for (let i = 0; i < steps; i++) {
+			this.velocity += (-stiffness * (this.value - this.target) - friction * this.velocity) * h;
+			this.value += this.velocity * h;
+		}
+		if (!Number.isFinite(this.value) || !Number.isFinite(this.velocity) || Math.abs(this.velocity) < REST_VELOCITY && Math.abs(this.value - this.target) < REST_DELTA) {
+			this.value = this.target;
+			this.velocity = 0;
+			this.frame = 0;
+			const done = this.onRest;
+			this.onRest = null;
+			this.onUpdate(this.value);
+			done?.();
+			return;
+		}
+		this.onUpdate(this.value);
+		this.frame = requestAnimationFrame(this.tick);
+	};
+};
+function project(velocity, decelerationRate = .998) {
+	return velocity / 1e3 * decelerationRate / (1 - decelerationRate);
+}
+function rubberband(overshoot, dimension, constant = .55) {
+	if (dimension <= 0) return 0;
+	const x = Math.abs(overshoot);
+	return Math.sign(overshoot) * (x * dimension * constant) / (dimension + constant * x);
+}
+var HyVelocityTracker = class {
+	samples = [];
+	add(value, time = performance.now()) {
+		this.samples.push({
+			t: time,
+			v: value
+		});
+		while (this.samples.length > 2 && time - (this.samples[0]?.t ?? time) > 100) this.samples.shift();
+	}
+	reset() {
+		this.samples = [];
+	}
+	velocity(now = performance.now()) {
+		const recent = this.samples.filter((s) => now - s.t <= 100);
+		const first = recent[0];
+		const last = recent[recent.length - 1];
+		if (!first || !last || last.t === first.t) return 0;
+		return (last.v - first.v) / (last.t - first.t) * 1e3;
+	}
+};
+function injectHyVisibility() {
+	const host = inject(ElementRef).nativeElement;
+	const destroy = inject(DestroyRef);
+	const visible = signal(false, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	afterNextRender(() => {
+		const doc = host.ownerDocument;
+		let intersects = typeof IntersectionObserver !== "function";
+		const update = () => visible.set(intersects && doc.visibilityState !== "hidden");
+		const observer = typeof IntersectionObserver === "function" ? new IntersectionObserver((entries) => {
+			intersects = entries.some((entry) => entry.isIntersecting);
+			update();
+		}) : null;
+		observer?.observe(host);
+		update();
+		doc.addEventListener("visibilitychange", update);
+		destroy.onDestroy(() => {
+			observer?.disconnect();
+			doc.removeEventListener("visibilitychange", update);
+		});
+	});
+	return visible.asReadonly();
+}
+var HySceneLight = class HySceneLight {
+	document = inject(DOCUMENT);
+	motion = inject(HyMotion);
+	entries = /* @__PURE__ */ new Map();
+	observers = /* @__PURE__ */ new Map();
+	resize;
+	abort;
+	event;
+	frame = 0;
+	dirty = true;
+	constructor() {
+		effect(() => {
+			if (!this.motion.enabled()) this.reset();
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.reset();
+			this.abort?.abort();
+			this.resize?.disconnect();
+			this.observers.forEach((o) => o.disconnect());
+		});
+	}
+	register(host, handlers, scene = false, root = null) {
+		if (typeof IntersectionObserver !== "function" || !this.document.defaultView?.matchMedia("(hover: hover) and (pointer: fine)").matches) return () => handlers.destroy?.();
+		this.start();
+		const entry = {
+			host,
+			handlers,
+			scene,
+			active: false,
+			intersecting: false
+		};
+		const group = this.entries.get(host) ?? [];
+		group.push(entry);
+		this.entries.set(host, group);
+		let observer = this.observers.get(root);
+		if (!observer) {
+			observer = new IntersectionObserver((changes) => {
+				for (const change of changes) for (const item of this.entries.get(change.target) ?? []) {
+					item.intersecting = change.isIntersecting;
+					item.rect = void 0;
+					if (!item.intersecting) this.leave(item);
+				}
+				this.schedule();
+			}, { root });
+			this.observers.set(root, observer);
+		}
+		observer.observe(host);
+		this.resize?.observe(host);
+		return () => {
+			this.leave(entry);
+			handlers.destroy?.();
+			const remaining = (this.entries.get(host) ?? []).filter((item) => item !== entry);
+			if (remaining.length) this.entries.set(host, remaining);
+			else {
+				this.entries.delete(host);
+				this.observers.forEach((o) => o.unobserve(host));
+				this.resize?.unobserve(host);
+			}
+			if (!this.entries.size) {
+				this.reset();
+				this.abort?.abort();
+				this.abort = void 0;
+				this.resize?.disconnect();
+				this.resize = void 0;
+				this.observers.forEach((o) => o.disconnect());
+				this.observers.clear();
+			}
+		};
+	}
+	start() {
+		if (this.abort) return;
+		const options = {
+			passive: true,
+			capture: true,
+			signal: (this.abort = new AbortController()).signal
+		};
+		this.document.addEventListener("pointermove", (event) => {
+			if (event.pointerType === "touch") return;
+			this.event = event;
+			this.schedule();
+		}, options);
+		this.document.addEventListener("pointerout", (event) => {
+			if (!event.relatedTarget) this.reset();
+		}, options);
+		this.document.addEventListener("pointercancel", () => this.reset(), options);
+		this.document.addEventListener("scroll", () => {
+			this.dirty = true;
+			this.schedule();
+		}, options);
+		this.document.defaultView?.addEventListener("resize", () => {
+			this.dirty = true;
+			this.schedule();
+		}, options);
+		this.document.addEventListener("visibilitychange", () => {
+			if (this.document.hidden) this.reset();
+		}, options);
+		this.resize = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+			this.dirty = true;
+			this.schedule();
+		}) : void 0;
+	}
+	schedule() {
+		if (!this.frame && this.event && this.motion.enabled() && !this.document.hidden) this.frame = requestAnimationFrame(() => this.draw());
+	}
+	draw() {
+		this.frame = 0;
+		const event = this.event;
+		if (!event || !this.motion.enabled() || this.document.hidden) return;
+		const work = [];
+		const inactive = [];
+		for (const group of this.entries.values()) for (const entry of group) {
+			if (!entry.intersecting || !entry.host.isConnected || work.length >= 64) {
+				inactive.push(entry);
+				continue;
+			}
+			if (this.dirty || !entry.rect) entry.rect = entry.host.getBoundingClientRect();
+			const rect = entry.rect;
+			const inside = event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+			work.push({
+				entry,
+				rect,
+				inside
+			});
+		}
+		this.dirty = false;
+		for (const entry of inactive) this.leave(entry);
+		for (const { entry, rect, inside } of work) {
+			if (!inside && !entry.scene) {
+				this.leave(entry);
+				continue;
+			}
+			if (!rect.width || !rect.height) continue;
+			if (!entry.active) {
+				entry.active = true;
+				entry.handlers.enter?.(event, rect);
+			}
+			entry.handlers.move(event, rect);
+		}
+	}
+	leave(entry) {
+		if (entry.active) {
+			entry.active = false;
+			entry.handlers.leave?.();
+		}
+	}
+	reset() {
+		if (this.frame) cancelAnimationFrame(this.frame);
+		this.frame = 0;
+		this.event = void 0;
+		for (const group of this.entries.values()) for (const entry of group) this.leave(entry);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySceneLight,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySceneLight,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySceneLight,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var HySceneLightDirective = class HySceneLightDirective {
+	constructor() {
+		const host = inject(ElementRef).nativeElement;
+		const scene = inject(HySceneLight), destroy = inject(DestroyRef);
+		afterNextRender(() => {
+			let lastX = "", lastY = "";
+			const unregister = scene.register(host, {
+				move: (event, rect) => {
+					const x = `${((event.clientX - rect.left) / rect.width * 100).toFixed(1)}%`;
+					const y = `${((event.clientY - rect.top) / rect.height * 100).toFixed(1)}%`;
+					if (x !== lastX) host.style.setProperty("--hy-px", lastX = x);
+					if (y !== lastY) host.style.setProperty("--hy-py", lastY = y);
+					host.style.setProperty("--hy-glow", "0.18");
+				},
+				leave: () => host.style.setProperty("--hy-glow", "0")
+			}, true);
+			destroy.onDestroy(unregister);
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySceneLightDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HySceneLightDirective,
+		isStandalone: true,
+		selector: "[hySceneLight]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySceneLightDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[hySceneLight]" }]
+	}],
+	ctorParameters: () => []
+});
+var HyFlip = class HyFlip {
+	host = inject(ElementRef).nativeElement;
+	motion = inject(HyMotion);
+	injector = inject(Injector);
+	destroy = inject(DestroyRef);
+	animation;
+	generation = 0;
+	constructor() {
+		effect(() => {
+			if (!this.motion.enabled()) this.animation?.cancel();
+		});
+		this.destroy.onDestroy(() => {
+			this.generation++;
+			this.animation?.cancel();
+		});
+	}
+	run(change) {
+		const generation = ++this.generation;
+		this.animation?.cancel();
+		const before = this.host.getBoundingClientRect();
+		change();
+		if (!this.motion.enabled() || typeof this.host.animate !== "function") return;
+		afterNextRender(() => {
+			if (this.destroy.destroyed || generation !== this.generation || !this.motion.enabled()) return;
+			const after = this.host.getBoundingClientRect();
+			if (!after.width || !after.height) return;
+			this.animation = this.host.animate([{
+				transform: `translate(${before.left - after.left}px, ${before.top - after.top}px) scale(${before.width / after.width}, ${before.height / after.height})`,
+				transformOrigin: "top left"
+			}, {
+				transform: "none",
+				transformOrigin: "top left"
+			}], {
+				duration: MOTION.quick.duration * 1e3,
+				easing: MOTION.settle.css,
+				composite: "add"
+			});
+		}, { injector: this.injector });
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyFlip,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.3",
+		type: HyFlip,
+		isStandalone: true,
+		selector: "[hyFlip]",
+		exportAs: ["hyFlip"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyFlip,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyFlip]",
+			exportAs: "hyFlip"
+		}]
+	}],
+	ctorParameters: () => []
+});
+var HyStagger = class HyStagger {
+	hyStagger = input(50, {
+		...ngDevMode ? { debugName: "hyStagger" } : /* istanbul ignore next */ {},
+		transform: (value) => numberAttribute(value, 50)
+	});
+	host = inject(ElementRef).nativeElement;
+	visible = injectHyVisibility();
+	motion = inject(HyMotion);
+	seen = /* @__PURE__ */ new WeakSet();
+	animations = /* @__PURE__ */ new Set();
+	constructor() {
+		const destroy = inject(DestroyRef);
+		const animate = () => {
+			let index = 0;
+			for (const child of Array.from(this.host.children)) {
+				if (this.seen.has(child)) continue;
+				this.seen.add(child);
+				if (!this.motion.enabled() || typeof child.animate !== "function") continue;
+				const animation = child.animate([{
+					opacity: 0,
+					transform: "translateY(8px)"
+				}, {
+					opacity: 1,
+					transform: "none"
+				}], {
+					duration: MOTION.quick.duration * 1e3,
+					delay: Math.min(300, index++ * Math.max(0, Math.min(80, this.hyStagger()))),
+					easing: MOTION.settle.css,
+					fill: "backwards",
+					composite: "add"
+				});
+				this.animations.add(animation);
+				animation.finished.then(() => this.animations.delete(animation), () => this.animations.delete(animation));
+			}
+		};
+		effect(() => {
+			if (!this.motion.enabled() || !this.visible()) {
+				this.animations.forEach((a) => a.cancel());
+				this.animations.clear();
+			}
+			if (this.visible()) animate();
+		});
+		afterNextRender(() => {
+			const observer = new MutationObserver(() => {
+				if (this.visible()) animate();
+			});
+			observer.observe(this.host, { childList: true });
+			destroy.onDestroy(() => observer.disconnect());
+		});
+		destroy.onDestroy(() => this.animations.forEach((a) => a.cancel()));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyStagger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyStagger,
+		isStandalone: true,
+		selector: "[hyStagger]",
+		inputs: { hyStagger: {
+			classPropertyName: "hyStagger",
+			publicName: "hyStagger",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyStagger,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[hyStagger]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { hyStagger: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "hyStagger",
+			required: false
+		}]
+	}] }
+});
+export { HyFlip, HyMotion, HySceneLight, HySceneLightDirective, HySpring, HyStagger, HyVelocityTracker, MOTION, SPRINGS, injectHyVisibility, project, rubberband };
+
+//# sourceMappingURL=hyalo-angular-motion.mjs.map