@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-image-compare.mjs

@@ -0,0 +1,168 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, model } from "@angular/core";
+import { injectId } from "@hyalo/angular/core";
+var HyImageCompare = class HyImageCompare {
+	before = input.required(...ngDevMode ? [{ debugName: "before" }] : /* istanbul ignore next */ []);
+	after = input.required(...ngDevMode ? [{ debugName: "after" }] : /* istanbul ignore next */ []);
+	beforeAlt = input.required(...ngDevMode ? [{ debugName: "beforeAlt" }] : /* istanbul ignore next */ []);
+	afterAlt = input.required(...ngDevMode ? [{ debugName: "afterAlt" }] : /* istanbul ignore next */ []);
+	label = input("Reveal before image", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	value = model(50, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	ratio = input("16 / 9", ...ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []);
+	id = injectId("hy-compare");
+	position = computed(() => Math.max(0, Math.min(100, Number(this.value()) || 0)), ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	clip = computed(() => "inset(0 " + (100 - this.position()) + "% 0 0)", ...ngDevMode ? [{ debugName: "clip" }] : /* istanbul ignore next */ []);
+	change(event) {
+		this.value.set(event.target.valueAsNumber);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyImageCompare,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyImageCompare,
+		isStandalone: true,
+		selector: "hy-image-compare",
+		inputs: {
+			before: {
+				classPropertyName: "before",
+				publicName: "before",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			after: {
+				classPropertyName: "after",
+				publicName: "after",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			beforeAlt: {
+				classPropertyName: "beforeAlt",
+				publicName: "beforeAlt",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			afterAlt: {
+				classPropertyName: "afterAlt",
+				publicName: "afterAlt",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ratio: {
+				classPropertyName: "ratio",
+				publicName: "ratio",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		ngImport: i0,
+		template: "<div class=\"frame\" [style.aspect-ratio]=\"ratio()\">\r\n  <img [src]=\"after()\" [alt]=\"afterAlt()\" draggable=\"false\" />\r\n  <img\r\n    class=\"before\"\r\n    [src]=\"before()\"\r\n    [alt]=\"beforeAlt()\"\r\n    [style.clip-path]=\"clip()\"\r\n    draggable=\"false\"\r\n  />\r\n  <span class=\"handle\" aria-hidden=\"true\" [style.left.%]=\"position()\">‖</span>\r\n</div>\r\n<label [for]=\"id\">{{ label() }}: {{ position() }}%</label>\r\n<input\r\n  [id]=\"id\"\r\n  type=\"range\"\r\n  min=\"0\"\r\n  max=\"100\"\r\n  step=\"1\"\r\n  [value]=\"position()\"\r\n  (input)=\"change($event)\"\r\n/>\r\n",
+		styles: [":host{display:block;color:var(--hy-ink)}.frame{position:relative;overflow:clip;border-radius:var(--hy-radius-l);background:var(--hy-surface-3);direction:ltr}img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}.handle{position:absolute;inset-block:0;inline-size:2px;background:var(--hy-primary-ink);display:grid;place-items:center;color:var(--hy-ink);text-shadow:0 0 3px var(--hy-bg)}label{display:block;margin-block-start:var(--hy-space-3)}input{inline-size:100%;min-block-size:2rem;accent-color:var(--hy-primary);direction:ltr}input:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyImageCompare,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-image-compare",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"frame\" [style.aspect-ratio]=\"ratio()\">\r\n  <img [src]=\"after()\" [alt]=\"afterAlt()\" draggable=\"false\" />\r\n  <img\r\n    class=\"before\"\r\n    [src]=\"before()\"\r\n    [alt]=\"beforeAlt()\"\r\n    [style.clip-path]=\"clip()\"\r\n    draggable=\"false\"\r\n  />\r\n  <span class=\"handle\" aria-hidden=\"true\" [style.left.%]=\"position()\">‖</span>\r\n</div>\r\n<label [for]=\"id\">{{ label() }}: {{ position() }}%</label>\r\n<input\r\n  [id]=\"id\"\r\n  type=\"range\"\r\n  min=\"0\"\r\n  max=\"100\"\r\n  step=\"1\"\r\n  [value]=\"position()\"\r\n  (input)=\"change($event)\"\r\n/>\r\n",
+			styles: [":host{display:block;color:var(--hy-ink)}.frame{position:relative;overflow:clip;border-radius:var(--hy-radius-l);background:var(--hy-surface-3);direction:ltr}img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}.handle{position:absolute;inset-block:0;inline-size:2px;background:var(--hy-primary-ink);display:grid;place-items:center;color:var(--hy-ink);text-shadow:0 0 3px var(--hy-bg)}label{display:block;margin-block-start:var(--hy-space-3)}input{inline-size:100%;min-block-size:2rem;accent-color:var(--hy-primary);direction:ltr}input:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}\n"]
+		}]
+	}],
+	propDecorators: {
+		before: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "before",
+				required: true
+			}]
+		}],
+		after: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "after",
+				required: true
+			}]
+		}],
+		beforeAlt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "beforeAlt",
+				required: true
+			}]
+		}],
+		afterAlt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "afterAlt",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		ratio: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ratio",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyImageCompare };
+
+//# sourceMappingURL=hyalo-angular-image-compare.mjs.map

package/fesm2022/hyalo-angular-image-compare.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-image-compare.mjs","names":[],"sources":["../../../projects/hyalo/image-compare/image-compare.ts","../../../projects/hyalo/image-compare/image-compare.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\r\nimport { injectId } from '@hyalo/angular/core';\r\n/** Native range input provides pointer, touch, keyboard and screen reader controls. */\r\n@Component({\r\n  selector: 'hy-image-compare',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './image-compare.html',\r\n  styleUrl: './image-compare.css',\r\n})\r\nexport class HyImageCompare {\r\n  readonly before = input.required<string>();\r\n  readonly after = input.required<string>();\r\n  readonly beforeAlt = input.required<string>();\r\n  readonly afterAlt = input.required<string>();\r\n  readonly label = input('Reveal before image');\r\n  readonly value = model(50);\r\n  readonly ratio = input('16 / 9');\r\n  protected readonly id = injectId('hy-compare');\r\n  protected readonly position = computed(() =>\r\n    Math.max(0, Math.min(100, Number(this.value()) || 0)),\r\n  );\r\n  protected readonly clip = computed(() => 'inset(0 ' + (100 - this.position()) + '% 0 0)');\r\n  protected change(event: Event): void {\r\n    this.value.set((event.target as HTMLInputElement).valueAsNumber);\r\n  }\r\n}\r\n","<div class=\"frame\" [style.aspect-ratio]=\"ratio()\">\r\n  <img [src]=\"after()\" [alt]=\"afterAlt()\" draggable=\"false\" />\r\n  <img\r\n    class=\"before\"\r\n    [src]=\"before()\"\r\n    [alt]=\"beforeAlt()\"\r\n    [style.clip-path]=\"clip()\"\r\n    draggable=\"false\"\r\n  />\r\n  <span class=\"handle\" aria-hidden=\"true\" [style.left.%]=\"position()\">‖</span>\r\n</div>\r\n<label [for]=\"id\">{{ label() }}: {{ position() }}%</label>\r\n<input\r\n  [id]=\"id\"\r\n  type=\"range\"\r\n  min=\"0\"\r\n  max=\"100\"\r\n  step=\"1\"\r\n  [value]=\"position()\"\r\n  (input)=\"change($event)\"\r\n/>\r\n"],"mappings":";;;AASA,IAAa,iBAAb,MAAa,eAAc;CAChB,SAAS,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACjC,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,YAAY,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACpC,WAAW,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACnC,QAAQ,MAAM,uBAAsB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACpC,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACjB,QAAQ,MAAM,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACb,KAAK,SAAS,YAAY;CAC1B,WAAW,eAC5B,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,OAAO,KAAK,MAAK,CAAE,KAAK,CAAC,CAAC,GACrD,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACkB,OAAO,eAAe,cAAc,MAAM,KAAK,SAAQ,KAAM,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/E,OAAO,OAAY;EAC3B,KAAK,MAAM,IAAK,MAAM,OAA4B,aAAa;CACjE;CAfW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAc,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAd,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAc,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,OAAA,cAAA;EAAA,UAAA;EAAA,UCT3B;EAqBA,QAAA,CAAA,2nBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADZa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAN1B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAkB,iBACX,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,2nBAAA;EAAA,CAAA"}

package/fesm2022/hyalo-angular-interaction.mjs

@@ -0,0 +1,446 @@
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, afterNextRender, booleanAttribute, inject, input, numberAttribute } from "@angular/core";
+import { HyMotion, HySceneLight, MOTION } from "@hyalo/angular/motion";
+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 scene = inject(HySceneLight), destroy = inject(DestroyRef);
+	afterNextRender(() => {
+		const unregister = scene.register(host, handlers());
+		destroy.onDestroy(unregister);
+	});
+}
+function cssVarSetter(el, name, unit, motion, vars) {
+	let quick;
+	let engine;
+	let disposed = false;
+	motion.gsap().then((gsap) => {
+		if (!gsap || disposed) return;
+		engine = gsap;
+		el.classList.add("hy-gsap");
+		if (!el.style.getPropertyValue(name)) el.style.setProperty(name, `0${unit}`);
+		quick = gsap.quickTo(el, name, vars);
+	});
+	const set = ((value) => {
+		if (disposed) return;
+		if (quick && motion.enabled()) quick(value);
+		else {
+			engine?.killTweensOf(el);
+			el.style.setProperty(name, `${value}${unit}`);
+		}
+	});
+	set.destroy = () => {
+		disposed = true;
+		engine?.killTweensOf(el);
+		quick = void 0;
+	};
+	return set;
+}
+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 {
+				destroy: () => {
+					rx.destroy();
+					ry.destroy();
+				},
+				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 {
+				destroy: () => {
+					mx.destroy();
+					my.destroy();
+				},
+				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":[],"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/motion';\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, HySceneLight, type HyPointerHandlers } from '@hyalo/angular/motion';\r\nexport type PointerHandlers = HyPointerHandlers;\r\n\r\nexport function bindPointer(handlers: () => PointerHandlers): void {\r\n  const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  const scene = inject(HySceneLight),\r\n    destroy = inject(DestroyRef);\r\n  afterNextRender(() => {\r\n    const unregister = scene.register(host, handlers());\r\n    destroy.onDestroy(unregister);\r\n  });\r\n}\r\n\r\nexport interface HyCssSetter {\r\n  (value: number): void;\r\n  destroy(): void;\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): HyCssSetter {\r\n  let quick: ((value: number) => unknown) | undefined;\r\n  let engine: Awaited<ReturnType<HyMotion['gsap']>>;\r\n  let disposed = false;\r\n  void motion.gsap().then((gsap) => {\r\n    if (!gsap || disposed) return;\r\n    engine = gsap;\r\n    el.classList.add('hy-gsap');\r\n    // quickTo preserves a custom property's existing unit instead of appending one.\r\n    if (!el.style.getPropertyValue(name)) el.style.setProperty(name, `0${unit}`);\r\n    quick = gsap.quickTo(el, name, vars);\r\n  });\r\n  const set = ((value: number): void => {\r\n    if (disposed) return;\r\n    if (quick && motion.enabled()) quick(value);\r\n    else {\r\n      engine?.killTweensOf(el);\r\n      el.style.setProperty(name, `${value}${unit}`);\r\n    }\r\n  }) as HyCssSetter;\r\n  set.destroy = () => {\r\n    disposed = true;\r\n    engine?.killTweensOf(el);\r\n    quick = undefined;\r\n  };\r\n  return set;\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/motion';\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        destroy: () => {\r\n          rx.destroy();\r\n          ry.destroy();\r\n        },\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/motion';\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        destroy: () => {\r\n          mx.destroy();\r\n          my.destroy();\r\n        },\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/motion';\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":"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"}