@joanroucoux/cairn-ui 0.8.1 → 0.9.0

package/fesm2022/joanroucoux-cairn-ui-motion.mjs

@@ -1,415 +1,383 @@
-import * as i0 from '@angular/core';
-import { Injectable, signal, inject, DestroyRef, ElementRef, afterNextRender, Directive, input, effect, untracked } from '@angular/core';
-
-class FlipItems {
-    items = new Set();
-    destroyed = new Set();
-    used = false;
-    get marked() {
-        return this.used;
-    }
-    add(item) {
-        this.used = true;
-        this.items.add(item);
-    }
-    remove(item) {
-        this.destroyed.add(item);
-    }
-    inside(host) {
-        const inside = [];
-        for (const item of this.items) {
-            if (host.contains(item)) {
-                inside.push(item);
-            }
-            else if (this.destroyed.has(item)) {
-                this.items.delete(item);
-                this.destroyed.delete(item);
-            }
-        }
-        return inside;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FlipItems, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FlipItems });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FlipItems, decorators: [{
-            type: Injectable
-        }] });
-
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, Injectable, afterNextRender, effect, inject, input, signal, untracked } from "@angular/core";
+var FlipItems = class FlipItems {
+	items = /* @__PURE__ */ new Set();
+	destroyed = /* @__PURE__ */ new Set();
+	used = false;
+	get marked() {
+		return this.used;
+	}
+	add(item) {
+		this.used = true;
+		this.items.add(item);
+	}
+	remove(item) {
+		this.destroyed.add(item);
+	}
+	inside(host) {
+		const inside = [];
+		for (const item of this.items) if (host.contains(item)) inside.push(item);
+		else if (this.destroyed.has(item)) {
+			this.items.delete(item);
+			this.destroyed.delete(item);
+		}
+		return inside;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FlipItems,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FlipItems
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FlipItems,
+	decorators: [{ type: Injectable }]
+});
 function readDuration(element, name, fallback) {
-    const raw = getComputedStyle(element).getPropertyValue(name).trim();
-    const value = parseFloat(raw);
-    if (Number.isNaN(value)) {
-        return fallback;
-    }
-    return raw.endsWith('ms') ? value : value * 1000;
+	const raw = getComputedStyle(element).getPropertyValue(name).trim();
+	const value = parseFloat(raw);
+	if (Number.isNaN(value)) return fallback;
+	return raw.endsWith("ms") ? value : value * 1e3;
 }
 function readEasing(element, name, fallback) {
-    return getComputedStyle(element).getPropertyValue(name).trim() || fallback;
+	return getComputedStyle(element).getPropertyValue(name).trim() || fallback;
 }
-
-const QUERY = '(prefers-reduced-motion: reduce)';
-/**
- * A signal that follows the user's `prefers-reduced-motion` preference live.
- * Call it in an injection context; the listener is removed with that context.
- *
- * @example
- * protected readonly reduced = injectReducedMotion();
- */
+const QUERY = "(prefers-reduced-motion: reduce)";
 function injectReducedMotion() {
-    if (typeof matchMedia === 'undefined') {
-        return signal(false).asReadonly();
-    }
-    const query = matchMedia(QUERY);
-    const reduced = signal(query.matches, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "reduced" }] : /* istanbul ignore next */ []));
-    const listener = (event) => reduced.set(event.matches);
-    query.addEventListener('change', listener);
-    inject(DestroyRef).onDestroy(() => query.removeEventListener('change', listener));
-    return reduced.asReadonly();
+	if (typeof matchMedia === "undefined") return signal(false).asReadonly();
+	const query = matchMedia(QUERY);
+	const reduced = signal(query.matches, ...ngDevMode ? [{ debugName: "reduced" }] : /* istanbul ignore next */ []);
+	const listener = (event) => reduced.set(event.matches);
+	query.addEventListener("change", listener);
+	inject(DestroyRef).onDestroy(() => query.removeEventListener("change", listener));
+	return reduced.asReadonly();
 }
-
 function translateY(element) {
-    const matrix = /^matrix\((.+)\)$/.exec(getComputedStyle(element).transform);
-    return matrix ? parseFloat(matrix[1].split(',')[5]) : 0;
-}
-/**
- * Slides the items of a list into place when one is removed or inserted (FLIP): it measures every item
- * before and after the change, from the top of the list itself, then animates the shift in `translateY`
- * over `--duration-base` `--ease-out`. Pair it with `animate.leave="ui-leave-fade"` on the item so it fades
- * out first. Nothing moves under `prefers-reduced-motion`: the list closes up at once.
- *
- * By default the items are the direct children of the list. Mark them with `uiFlipItem` instead when they
- * sit deeper, for instance a page of several groups: put `uiFlipList` on the element around every group and
- * `uiFlipItem` on each group heading and row, so a removal also slides the groups below. An item may sit
- * inside another item (a row inside a card): it then moves by its own share and its card carries the rest.
- * Only an item added or removed starts a slide; a change inside an item does not. Positions leave out the
- * translate of any animation running inside the list (a slide in progress, an enter fade-up).
- *
- * @example
- * <ul uiFlipList>
- *   @for (key of keys(); track key.id) {
- *     <li uiListRow animate.leave="ui-leave-fade">...</li>
- *   }
- * </ul>
- *
- * <table uiTable uiFlipList>
- *   @for (group of groups(); track group.id) {
- *     <tbody>
- *       <tr uiTr group uiFlipItem>...</tr>
- *       @for (row of group.rows; track row.id) {
- *         <tr uiTr uiFlipItem animate.leave="ui-leave-fade">...</tr>
- *       }
- *     </tbody>
- *   }
- * </table>
- */
-class UiFlipList {
-    host = inject(ElementRef).nativeElement;
-    reduced = injectReducedMotion();
-    mutations = new MutationObserver(() => this.onChange());
-    resizes = new ResizeObserver(() => {
-        this.tops = this.measure();
-    });
-    running = new Map();
-    watched = new Set();
-    items = inject(FlipItems, { self: true });
-    tops = new Map();
-    shifts = new Map();
-    constructor() {
-        afterNextRender(() => {
-            this.tops = this.measure();
-            this.mutations.observe(this.host, { childList: true, subtree: true });
-            this.resizes.observe(this.host);
-        });
-        inject(DestroyRef).onDestroy(() => {
-            this.mutations.disconnect();
-            this.resizes.disconnect();
-        });
-    }
-    tracked() {
-        if (!this.items.marked) {
-            return Array.from(this.host.children).filter((child) => child instanceof HTMLElement);
-        }
-        return this.items.inside(this.host);
-    }
-    measure() {
-        const elements = this.tracked();
-        const origin = this.host.getBoundingClientRect().top - this.host.scrollTop;
-        const tops = new Map(elements.map((element) => [element, element.getBoundingClientRect().top - origin]));
-        this.shifts = new Map();
-        for (const animation of this.host.getAnimations({ subtree: true })) {
-            const target = animation.effect.target;
-            if (target !== this.host) {
-                this.shifts.set(target, translateY(target));
-            }
-        }
-        for (const [moving, shift] of this.shifts) {
-            for (const [element, top] of tops) {
-                if (moving.contains(element)) {
-                    tops.set(element, top - shift);
-                }
-            }
-        }
-        for (const element of elements) {
-            if (!this.watched.has(element)) {
-                this.watched.add(element);
-                this.resizes.observe(element);
-            }
-        }
-        for (const element of this.watched) {
-            if (!tops.has(element)) {
-                this.watched.delete(element);
-                this.running.delete(element);
-                this.resizes.unobserve(element);
-            }
-        }
-        return tops;
-    }
-    onChange() {
-        const before = this.tops;
-        const after = this.measure();
-        this.tops = after;
-        const changed = after.size !== before.size || Array.from(after.keys()).some((element) => !before.has(element));
-        if (this.reduced() || !changed) {
-            return;
-        }
-        const duration = readDuration(this.host, '--duration-base', 260);
-        const easing = readEasing(this.host, '--ease-out', 'ease-out');
-        const moved = (element) => (before.get(element) ?? 0) - (after.get(element) ?? 0);
-        for (const [element] of after) {
-            if (!before.has(element)) {
-                continue;
-            }
-            const own = moved(element) - moved(this.parentItem(element, before, after));
-            if (Math.abs(own) < 0.5) {
-                continue;
-            }
-            const from = own + (this.shifts.get(element) ?? 0);
-            this.running.get(element)?.cancel();
-            const animation = element.animate([{ transform: `translateY(${from}px)` }, { transform: 'translateY(0)' }], {
-                duration,
-                easing,
-            });
-            animation.onfinish = () => {
-                if (this.running.get(element) === animation) {
-                    this.running.delete(element);
-                }
-            };
-            this.running.set(element, animation);
-        }
-    }
-    parentItem(element, before, after) {
-        let node = element.parentElement;
-        while (node !== this.host && !(before.has(node) && after.has(node))) {
-            node = node.parentElement;
-        }
-        return node;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFlipList, isStandalone: true, selector: "[uiFlipList]", providers: [FlipItems], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipList, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uiFlipList]',
-                    providers: [FlipItems],
-                }]
-        }], ctorParameters: () => [] });
-/**
- * Marks an element as an item of the nearest `uiFlipList`, at any depth: a group heading, a row inside a
- * group, a card. Once one item is marked, the list follows its marked items only.
- *
- * @example
- * <tr uiTr uiFlipItem animate.leave="ui-leave-fade">...</tr>
- */
-class UiFlipItem {
-    constructor() {
-        const items = inject(FlipItems, { optional: true });
-        if (items) {
-            const element = inject(ElementRef).nativeElement;
-            items.add(element);
-            inject(DestroyRef).onDestroy(() => items.remove(element));
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: UiFlipItem, isStandalone: true, selector: "[uiFlipItem]", ngImport: i0 });
+	const matrix = /^matrix\((.+)\)$/.exec(getComputedStyle(element).transform);
+	return matrix ? parseFloat(matrix[1].split(",")[5]) : 0;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiFlipItem, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uiFlipItem]',
-                }]
-        }], ctorParameters: () => [] });
-
+var UiFlipList = class UiFlipList {
+	host = inject(ElementRef).nativeElement;
+	reduced = injectReducedMotion();
+	mutations = new MutationObserver(() => this.onChange());
+	resizes = new ResizeObserver(() => {
+		this.tops = this.measure();
+	});
+	running = /* @__PURE__ */ new Map();
+	watched = /* @__PURE__ */ new Set();
+	items = inject(FlipItems, { self: true });
+	tops = /* @__PURE__ */ new Map();
+	shifts = /* @__PURE__ */ new Map();
+	constructor() {
+		afterNextRender(() => {
+			this.tops = this.measure();
+			this.mutations.observe(this.host, {
+				childList: true,
+				subtree: true
+			});
+			this.resizes.observe(this.host);
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.mutations.disconnect();
+			this.resizes.disconnect();
+		});
+	}
+	tracked() {
+		if (!this.items.marked) return Array.from(this.host.children).filter((child) => child instanceof HTMLElement);
+		return this.items.inside(this.host);
+	}
+	measure() {
+		const elements = this.tracked();
+		const origin = this.host.getBoundingClientRect().top - this.host.scrollTop;
+		const tops = new Map(elements.map((element) => [element, element.getBoundingClientRect().top - origin]));
+		this.shifts = /* @__PURE__ */ new Map();
+		for (const animation of this.host.getAnimations({ subtree: true })) {
+			const target = animation.effect.target;
+			if (target !== this.host) this.shifts.set(target, translateY(target));
+		}
+		for (const [moving, shift] of this.shifts) for (const [element, top] of tops) if (moving.contains(element)) tops.set(element, top - shift);
+		for (const element of elements) if (!this.watched.has(element)) {
+			this.watched.add(element);
+			this.resizes.observe(element);
+		}
+		for (const element of this.watched) if (!tops.has(element)) {
+			this.watched.delete(element);
+			this.running.delete(element);
+			this.resizes.unobserve(element);
+		}
+		return tops;
+	}
+	onChange() {
+		const before = this.tops;
+		const after = this.measure();
+		this.tops = after;
+		const changed = after.size !== before.size || Array.from(after.keys()).some((element) => !before.has(element));
+		if (this.reduced() || !changed) return;
+		const duration = readDuration(this.host, "--duration-base", 260);
+		const easing = readEasing(this.host, "--ease-out", "ease-out");
+		const moved = (element) => (before.get(element) ?? 0) - (after.get(element) ?? 0);
+		for (const [element] of after) {
+			if (!before.has(element)) continue;
+			const own = moved(element) - moved(this.parentItem(element, before, after));
+			if (Math.abs(own) < .5) continue;
+			const from = own + (this.shifts.get(element) ?? 0);
+			this.running.get(element)?.cancel();
+			const animation = element.animate([{ transform: `translateY(${from}px)` }, { transform: "translateY(0)" }], {
+				duration,
+				easing
+			});
+			animation.onfinish = () => {
+				if (this.running.get(element) === animation) this.running.delete(element);
+			};
+			this.running.set(element, animation);
+		}
+	}
+	parentItem(element, before, after) {
+		let node = element.parentElement;
+		while (node !== this.host && !(before.has(node) && after.has(node))) node = node.parentElement;
+		return node;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiFlipList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: UiFlipList,
+		isStandalone: true,
+		selector: "[uiFlipList]",
+		providers: [FlipItems],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiFlipList,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiFlipList]",
+			providers: [FlipItems]
+		}]
+	}],
+	ctorParameters: () => []
+});
+var UiFlipItem = class UiFlipItem {
+	constructor() {
+		const items = inject(FlipItems, { optional: true });
+		if (items) {
+			const element = inject(ElementRef).nativeElement;
+			items.add(element);
+			inject(DestroyRef).onDestroy(() => items.remove(element));
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiFlipItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: UiFlipItem,
+		isStandalone: true,
+		selector: "[uiFlipItem]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiFlipItem,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[uiFlipItem]" }]
+	}],
+	ctorParameters: () => []
+});
 const HOLD_MS = 200;
 const SCROLL_SETTLE_MS = 200;
 const SCROLL_START_MS = 300;
 function paintedElements(host) {
-    if (host.tagName === 'TR') {
-        return Array.from(host.children).filter((cell) => cell instanceof HTMLElement);
-    }
-    if (host.hasAttribute('ui-group-cell') && host.firstElementChild instanceof HTMLElement) {
-        return [host.firstElementChild];
-    }
-    return [host];
-}
-/**
- * Draws the eye to an element that just changed: scrolls it into view when it is off screen, holds the
- * `--soft` fill for 200 ms, then fades back to the element's own background over `--duration-highlight`.
- * Each new non-null token plays once, so pass a fresh value per event (an object or a counter), not a
- * boolean. A non-null token already present at first render plays on arrival. On a `tr` it paints the
- * cells, on a `td[ui-group-cell]` the band, anywhere else the host. Under `prefers-reduced-motion` the
- * scroll is instant and the fade lasts 600 ms.
- *
- * It starts on the next frame and, when the element is still playing a finite animation of its own (an
- * `animate.enter` fade on a new row), once that animation has finished, waiting no longer than
- * `--duration-base`: the element fades in, then lights up. Both can sit on the same element.
- *
- * Give the element `scroll-margin-top` and `scroll-margin-bottom` equal to what is pinned above and
- * below it (header, tab bar, action bar): a row under them counts as off screen and is scrolled out.
- * For an arrival on a page opened at the element, scroll to it at once first (`scrollIntoView` in
- * `afterNextRender`) and set the token afterwards: a token present at first render scrolls smoothly
- * from where the page is.
- *
- * @example
- * <a ui-row [uiHighlight]="changed() === holding.id ? token() : null" routerLink="/holdings/1">...</a>
- */
-class UiHighlight {
-    uiHighlight = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "uiHighlight" }] : /* istanbul ignore next */ []));
-    host = inject(ElementRef).nativeElement;
-    reduced = injectReducedMotion();
-    cancel = null;
-    constructor() {
-        effect(() => {
-            const token = this.uiHighlight();
-            if (token === null || token === undefined) {
-                return;
-            }
-            untracked(() => this.play());
-        });
-        inject(DestroyRef).onDestroy(() => this.cancel?.());
-    }
-    play() {
-        this.cancel?.();
-        if (this.isVisible()) {
-            this.cancel = this.flash();
-            return;
-        }
-        const reduced = this.reduced();
-        this.host.scrollIntoView({ behavior: reduced ? 'auto' : 'smooth', block: 'center' });
-        if (reduced) {
-            this.cancel = this.flash();
-            return;
-        }
-        let stopFlash = null;
-        let timer;
-        const moves = (event) => event.target === document || (event.target instanceof Node && event.target.contains(this.host));
-        const start = () => {
-            stopListening();
-            stopFlash = this.flash();
-        };
-        const onScrollEnd = (event) => {
-            if (moves(event)) {
-                start();
-            }
-        };
-        const onScroll = (event) => {
-            if (moves(event)) {
-                clearTimeout(timer);
-                timer = setTimeout(start, SCROLL_SETTLE_MS);
-            }
-        };
-        const stopListening = () => {
-            clearTimeout(timer);
-            window.removeEventListener('scrollend', onScrollEnd, true);
-            window.removeEventListener('scroll', onScroll, true);
-        };
-        timer = setTimeout(start, SCROLL_START_MS);
-        window.addEventListener('scrollend', onScrollEnd, true);
-        window.addEventListener('scroll', onScroll, true);
-        this.cancel = () => {
-            stopListening();
-            stopFlash?.();
-        };
-    }
-    isVisible() {
-        const rect = this.host.getBoundingClientRect();
-        const style = getComputedStyle(this.host);
-        const top = parseFloat(style.scrollMarginTop) || 0;
-        const bottom = parseFloat(style.scrollMarginBottom) || 0;
-        return rect.top >= top && rect.bottom <= window.innerHeight - bottom;
-    }
-    flash() {
-        const painted = paintedElements(this.host);
-        let animations = [];
-        let timer;
-        const paint = () => {
-            const fade = readDuration(this.host, '--duration-highlight', 1200);
-            const easing = readEasing(this.host, '--ease-out', 'ease-out');
-            const total = HOLD_MS + fade;
-            animations = painted.map((element) => element.animate([
-                { backgroundColor: 'var(--soft)', offset: 0 },
-                { backgroundColor: 'var(--soft)', offset: HOLD_MS / total, easing },
-                { offset: 1 },
-            ], { duration: total }));
-        };
-        const frame = requestAnimationFrame(() => {
-            const remaining = Array.from(new Set([this.host, ...painted]))
-                .flatMap((element) => element.getAnimations())
-                .map((animation) => {
-                const timing = animation.effect.getComputedTiming();
-                return Number(timing.endTime) - Number(timing.localTime ?? 0);
-            })
-                .filter((left) => Number.isFinite(left));
-            if (remaining.length === 0) {
-                paint();
-                return;
-            }
-            timer = setTimeout(paint, Math.min(Math.max(...remaining), readDuration(this.host, '--duration-base', 260)));
-        });
-        return () => {
-            cancelAnimationFrame(frame);
-            clearTimeout(timer);
-            animations.forEach((animation) => animation.cancel());
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiHighlight, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: UiHighlight, isStandalone: true, selector: "[uiHighlight]", inputs: { uiHighlight: { classPropertyName: "uiHighlight", publicName: "uiHighlight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+	if (host.tagName === "TR") return Array.from(host.children).filter((cell) => cell instanceof HTMLElement);
+	if (host.hasAttribute("ui-group-cell") && host.firstElementChild instanceof HTMLElement) return [host.firstElementChild];
+	return [host];
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiHighlight, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uiHighlight]',
-                }]
-        }], ctorParameters: () => [], propDecorators: { uiHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiHighlight", required: false }] }] } });
-
-/**
- * Holds the transitions of the host and of everything inside it until two frames after its first
- * render, through the `data-ui-settling` attribute and the matching rule of `styles/motion.css`.
- * A route's elements are created a tick before their classes are bound; a layout read in between
- * would otherwise turn the bound fill, colour or switch track into a transition on page open. Call it
- * in an injection context. A host whose view is never refreshed (a detached change detector) keeps the
- * attribute, and with it no transition.
- *
- * @example
- * constructor() {
- *   holdTransitionsUntilRendered();
- * }
- */
+var UiHighlight = class UiHighlight {
+	uiHighlight = input(null, ...ngDevMode ? [{ debugName: "uiHighlight" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef).nativeElement;
+	reduced = injectReducedMotion();
+	cancel = null;
+	constructor() {
+		effect(() => {
+			const token = this.uiHighlight();
+			if (token === null || token === void 0) return;
+			untracked(() => this.play());
+		});
+		inject(DestroyRef).onDestroy(() => this.cancel?.());
+	}
+	play() {
+		this.cancel?.();
+		if (this.isVisible()) {
+			this.cancel = this.flash();
+			return;
+		}
+		const reduced = this.reduced();
+		this.host.scrollIntoView({
+			behavior: reduced ? "auto" : "smooth",
+			block: "center"
+		});
+		if (reduced) {
+			this.cancel = this.flash();
+			return;
+		}
+		let stopFlash = null;
+		let timer;
+		const moves = (event) => event.target === document || event.target instanceof Node && event.target.contains(this.host);
+		const start = () => {
+			stopListening();
+			stopFlash = this.flash();
+		};
+		const onScrollEnd = (event) => {
+			if (moves(event)) start();
+		};
+		const onScroll = (event) => {
+			if (moves(event)) {
+				clearTimeout(timer);
+				timer = setTimeout(start, SCROLL_SETTLE_MS);
+			}
+		};
+		const stopListening = () => {
+			clearTimeout(timer);
+			window.removeEventListener("scrollend", onScrollEnd, true);
+			window.removeEventListener("scroll", onScroll, true);
+		};
+		timer = setTimeout(start, SCROLL_START_MS);
+		window.addEventListener("scrollend", onScrollEnd, true);
+		window.addEventListener("scroll", onScroll, true);
+		this.cancel = () => {
+			stopListening();
+			stopFlash?.();
+		};
+	}
+	isVisible() {
+		const rect = this.host.getBoundingClientRect();
+		const style = getComputedStyle(this.host);
+		const top = parseFloat(style.scrollMarginTop) || 0;
+		const bottom = parseFloat(style.scrollMarginBottom) || 0;
+		return rect.top >= top && rect.bottom <= window.innerHeight - bottom;
+	}
+	flash() {
+		const painted = paintedElements(this.host);
+		let animations = [];
+		let timer;
+		const paint = () => {
+			const fade = readDuration(this.host, "--duration-highlight", 1200);
+			const easing = readEasing(this.host, "--ease-out", "ease-out");
+			const total = HOLD_MS + fade;
+			animations = painted.map((element) => element.animate([
+				{
+					backgroundColor: "var(--soft)",
+					offset: 0
+				},
+				{
+					backgroundColor: "var(--soft)",
+					offset: HOLD_MS / total,
+					easing
+				},
+				{ offset: 1 }
+			], { duration: total }));
+		};
+		const frame = requestAnimationFrame(() => {
+			const remaining = Array.from(/* @__PURE__ */ new Set([this.host, ...painted])).flatMap((element) => element.getAnimations()).map((animation) => {
+				const timing = animation.effect.getComputedTiming();
+				return Number(timing.endTime) - Number(timing.localTime ?? 0);
+			}).filter((left) => Number.isFinite(left));
+			if (remaining.length === 0) {
+				paint();
+				return;
+			}
+			timer = setTimeout(paint, Math.min(Math.max(...remaining), readDuration(this.host, "--duration-base", 260)));
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+			clearTimeout(timer);
+			animations.forEach((animation) => animation.cancel());
+		};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiHighlight,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: UiHighlight,
+		isStandalone: true,
+		selector: "[uiHighlight]",
+		inputs: { uiHighlight: {
+			classPropertyName: "uiHighlight",
+			publicName: "uiHighlight",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiHighlight,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[uiHighlight]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { uiHighlight: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "uiHighlight",
+			required: false
+		}]
+	}] }
+});
 function holdTransitionsUntilRendered() {
-    const host = inject(ElementRef).nativeElement;
-    host.setAttribute('data-ui-settling', '');
-    afterNextRender({
-        read: () => {
-            requestAnimationFrame(() => requestAnimationFrame(() => host.removeAttribute('data-ui-settling')));
-        },
-    });
+	const host = inject(ElementRef).nativeElement;
+	host.setAttribute("data-ui-settling", "");
+	afterNextRender({ read: () => {
+		requestAnimationFrame(() => requestAnimationFrame(() => host.removeAttribute("data-ui-settling")));
+	} });
 }
-
-/**
- * Generated bundle index. Do not edit.
- */
-
 export { UiFlipItem, UiFlipList, UiHighlight, holdTransitionsUntilRendered, injectReducedMotion };
-//# sourceMappingURL=joanroucoux-cairn-ui-motion.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-motion.mjs.map