@hyalo/angular 0.1.0 → 0.3.1

package/fesm2022/hyalo-angular.mjs

@@ -1,473 +1,2 @@
-import * as i0 from "@angular/core";
-import { DOCUMENT, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, PLATFORM_ID, afterNextRender, afterRenderEffect, computed, effect, inject, input, signal } from "@angular/core";
-import { FocusMonitor, _IdGenerator } from "@angular/cdk/a11y";
-import { isPlatformBrowser } from "@angular/common";
-const DEFAULTS = {
-	material: "frosted",
-	size: "md",
-	tone: "primary"
-};
-const HY_CONFIG = new InjectionToken("HY_CONFIG", {
-	providedIn: "root",
-	factory: () => DEFAULTS
-});
-function provideHyalo(config = {}) {
-	return {
-		provide: HY_CONFIG,
-		useFactory: () => {
-			return {
-				...inject(HY_CONFIG, {
-					skipSelf: true,
-					optional: true
-				}) ?? DEFAULTS,
-				...config
-			};
-		}
-	};
-}
-function injectId(prefix) {
-	return inject(_IdGenerator).getId(`hy-${prefix}-`);
-}
-function injectIsBrowser() {
-	return isPlatformBrowser(inject(PLATFORM_ID));
-}
-function matchesMedia(query) {
-	return typeof matchMedia === "function" && matchMedia(query).matches;
-}
-function detectFidelity(nav) {
-	if (nav.connection?.saveData) return "low";
-	const memory = nav.deviceMemory ?? 8;
-	const cores = nav.hardwareConcurrency ?? 8;
-	if (memory <= 2 || cores <= 2) return "low";
-	if (memory <= 4 || cores <= 4 || matchesMedia("(pointer: coarse)")) return "medium";
-	return "high";
-}
-var HyFidelity = class HyFidelity {
-	config = inject(HY_CONFIG);
-	document = inject(DOCUMENT);
-	_tier = signal(this.config.fidelity ?? "medium", ...ngDevMode ? [{ debugName: "_tier" }] : /* istanbul ignore next */ []);
-	overridden = !!this.config.fidelity;
-	tier = this._tier.asReadonly();
-	constructor() {
-		if (!injectIsBrowser()) return;
-		afterNextRender(() => {
-			if (!this.overridden) this._tier.set(detectFidelity(navigator));
-		});
-		effect(() => this.document.documentElement.setAttribute("data-hy-fidelity", this._tier()));
-	}
-	setTier(tier) {
-		this.overridden = true;
-		this._tier.set(tier);
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.3",
-		ngImport: i0,
-		type: HyFidelity,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Injectable
-	});
-	static ɵprov = i0.ɵɵngDeclareInjectable({
-		minVersion: "12.0.0",
-		version: "22.2.3",
-		ngImport: i0,
-		type: HyFidelity,
-		providedIn: "root"
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.3",
-	ngImport: i0,
-	type: HyFidelity,
-	decorators: [{
-		type: Injectable,
-		args: [{ providedIn: "root" }]
-	}],
-	ctorParameters: () => []
-});
-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 forced = this.document.documentElement.getAttribute("data-hy-motion");
-		this._reduced.set(forced ? forced === "reduced" : query.matches);
-		query.addEventListener("change", (event) => {
-			if (!this.document.documentElement.hasAttribute("data-hy-motion")) this._reduced.set(event.matches);
-		});
-	}
-	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);
-	}
-	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 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;
-		this.value = initial;
-	}
-	get running() {
-		return this.frame !== 0;
-	}
-	to(target, options = {}) {
-		this.target = target;
-		this.config = {
-			damping: options.damping ?? SPRINGS.settle.damping,
-			response: options.response ?? SPRINGS.settle.response
-		};
-		if (options.velocity !== void 0) this.velocity = options.velocity;
-		this.onRest = options.onRest ?? null;
-		if (this.frame) return;
-		this.last = performance.now();
-		this.frame = requestAnimationFrame(this.tick);
-	}
-	set(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 = 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.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 (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;
-	}
-};
-var HyMaterialDirective = class HyMaterialDirective {
-	config = inject(HY_CONFIG);
-	fidelity = inject(HyFidelity);
-	material = input(void 0, {
-		...ngDevMode ? { debugName: "material" } : /* istanbul ignore next */ {},
-		alias: "hyMaterial"
-	});
-	thickness = input("regular", ...ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []);
-	resolved = computed(() => {
-		if (this.fidelity.tier() === "low") return "solid";
-		return this.material() || this.config.material;
-	}, ...ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []);
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.3",
-		ngImport: i0,
-		type: HyMaterialDirective,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Directive
-	});
-	static ɵdir = i0.ɵɵngDeclareDirective({
-		minVersion: "17.1.0",
-		version: "22.2.3",
-		type: HyMaterialDirective,
-		isStandalone: true,
-		selector: "[hyMaterial]",
-		inputs: {
-			material: {
-				classPropertyName: "material",
-				publicName: "hyMaterial",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			thickness: {
-				classPropertyName: "thickness",
-				publicName: "thickness",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			}
-		},
-		host: {
-			properties: {
-				"attr.data-material": "resolved()",
-				"attr.data-thickness": "thickness() === \"regular\" ? null : thickness()"
-			},
-			classAttribute: "hy-glass"
-		},
-		ngImport: i0
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.3",
-	ngImport: i0,
-	type: HyMaterialDirective,
-	decorators: [{
-		type: Directive,
-		args: [{
-			selector: "[hyMaterial]",
-			host: {
-				class: "hy-glass",
-				"[attr.data-material]": "resolved()",
-				"[attr.data-thickness]": "thickness() === \"regular\" ? null : thickness()"
-			}
-		}]
-	}],
-	propDecorators: {
-		material: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "hyMaterial",
-				required: false
-			}]
-		}],
-		thickness: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "thickness",
-				required: false
-			}]
-		}]
-	}
-});
-var HyInteractive = class HyInteractive {
-	host = inject(ElementRef);
-	focusMonitor = inject(FocusMonitor);
-	hovered = signal(false, ...ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []);
-	pressed = signal(false, ...ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []);
-	focusVisible = signal(false, ...ngDevMode ? [{ debugName: "focusVisible" }] : /* istanbul ignore next */ []);
-	constructor() {
-		afterNextRender(() => {
-			this.focusMonitor.monitor(this.host).subscribe((origin) => {
-				this.focusVisible.set(origin === "keyboard");
-			});
-		});
-		inject(DestroyRef).onDestroy(() => this.focusMonitor.stopMonitoring(this.host));
-	}
-	onEnter(event) {
-		if (event.pointerType !== "touch") this.hovered.set(true);
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.3",
-		ngImport: i0,
-		type: HyInteractive,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Directive
-	});
-	static ɵdir = i0.ɵɵngDeclareDirective({
-		minVersion: "14.0.0",
-		version: "22.2.3",
-		type: HyInteractive,
-		isStandalone: true,
-		selector: "[hyInteractive]",
-		host: {
-			listeners: {
-				"pointerenter": "onEnter($event)",
-				"pointerleave": "hovered.set(false); pressed.set(false)",
-				"pointerdown": "pressed.set(true)",
-				"pointerup": "pressed.set(false)",
-				"pointercancel": "pressed.set(false)"
-			},
-			properties: {
-				"attr.data-hover": "hovered() || null",
-				"attr.data-press": "pressed() || null",
-				"attr.data-focus-visible": "focusVisible() || null"
-			}
-		},
-		ngImport: i0
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.3",
-	ngImport: i0,
-	type: HyInteractive,
-	decorators: [{
-		type: Directive,
-		args: [{
-			selector: "[hyInteractive]",
-			host: {
-				"[attr.data-hover]": "hovered() || null",
-				"[attr.data-press]": "pressed() || null",
-				"[attr.data-focus-visible]": "focusVisible() || null",
-				"(pointerenter)": "onEnter($event)",
-				"(pointerleave)": "hovered.set(false); pressed.set(false)",
-				"(pointerdown)": "pressed.set(true)",
-				"(pointerup)": "pressed.set(false)",
-				"(pointercancel)": "pressed.set(false)"
-			}
-		}]
-	}],
-	ctorParameters: () => []
-});
-function trackIndicator(container, selected) {
-	const ready = signal(false, ...ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []);
-	const size = signal(0, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
-	const destroyRef = inject(DestroyRef);
-	afterNextRender(() => {
-		const row = container()?.nativeElement;
-		if (!row || typeof ResizeObserver !== "function") return;
-		const observer = new ResizeObserver(() => size.update((v) => v + 1));
-		observer.observe(row);
-		destroyRef.onDestroy(() => observer.disconnect());
-	});
-	afterRenderEffect({
-		earlyRead: () => {
-			size();
-			const row = container()?.nativeElement;
-			const item = selected();
-			if (!row || !item) return null;
-			const rowRect = row.getBoundingClientRect();
-			const rect = item.getBoundingClientRect();
-			const scale = row.offsetWidth ? rowRect.width / row.offsetWidth : 1;
-			return {
-				row,
-				x: (rect.left - rowRect.left) / scale + row.scrollLeft,
-				size: rect.width / scale
-			};
-		},
-		write: (measured) => {
-			const m = measured();
-			if (!m) return;
-			m.row.style.setProperty("--hy-ind-x", `${m.x}px`);
-			m.row.style.setProperty("--hy-ind-size", `${m.size}px`);
-			if (!ready()) requestAnimationFrame(() => ready.set(true));
-		}
-	});
-	return ready.asReadonly();
-}
-export { HY_CONFIG, HyFidelity, HyInteractive, HyMaterialDirective, HyMotion, HySpring, HyVelocityTracker, MOTION, SPRINGS, detectFidelity, injectId, project, provideHyalo, rubberband, injectIsBrowser as ɵinjectIsBrowser, matchesMedia as ɵmatchesMedia, trackIndicator as ɵtrackIndicator };
-
-//# sourceMappingURL=hyalo-angular.mjs.map
+export * from "@hyalo/angular/core";
+export * from "@hyalo/angular/motion";