ngwr 11.0.0 → 11.2.0

package/fesm2022/ngwr-blur-text-testing.mjs

@@ -0,0 +1,203 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/** The animated pieces — one per word or per character, whitespace excluded. */
+const PIECE = '.wr-blur-text__piece';
+/** The whitespace runs between them, rendered but never staggered. */
+const SPACE = '.wr-blur-text__space';
+/** The readable copy of the string, carried once and hidden with CSS. */
+const SR_ONLY = '.wr-blur-text__sr-only';
+/**
+ * An inline `opacity` declaration — the one property the reveal writes on every path.
+ *
+ * It is staged before the tween starts and re-committed when it finishes, so its
+ * presence is the durable evidence that the component touched a piece at all. Matched
+ * off the `style` ATTRIBUTE rather than through `getCssValue`, which would answer from
+ * a computed style and report `1` for a piece nobody ever wrote to.
+ */
+const INLINE_OPACITY = /(?:^|;)\s*opacity\s*:/;
+/** Exactly what the element holds — untrimmed, unlike `TestElement.text()`. */
+async function rawText(element) {
+    return (await element.getProperty('textContent')) ?? '';
+}
+/**
+ * Test harness for `<wr-blur-text>`.
+ *
+ * **Most of what this component does cannot be read from a test, and the methods that
+ * are missing are missing on purpose.** The reveal is a Web Animations tween per piece
+ * — blur, vertical offset and opacity, staggered — started by an `IntersectionObserver`.
+ * A unit test has no layout, no compositor and no WAAPI, so there is no
+ * `getOpacity()`, no `getBlurRadius()` and no `getOffset()`: each would report the
+ * staged from-state forever in jsdom, and in a real browser it would report the inline
+ * value while the compositor paints a different one. There is no `isAnimating()` and no
+ * `whenAnimationComplete()` either — nothing in the DOM says a tween is running, and
+ * completion is the `animationComplete` OUTPUT, which the host binds. Nor is there an
+ * `enterViewport()` / `scrollIntoView()`: the trigger is an observer, which a
+ * `TestElement` cannot reach, and a method that pretended to scroll would do nothing in
+ * jsdom and something untimed in a browser. The inputs that shape the tween —
+ * `direction`, `delay`, `stepDuration`, `easing` — never reach the DOM at all; they live
+ * in a keyframe array and an effect timing, and neither is a document.
+ *
+ * **What is real is the split and the accessible layer, and they are two questions.**
+ * The string is carried once in a visually-hidden span, and every animated piece is
+ * `aria-hidden` so a screen reader does not spell the text out letter by letter — so
+ * {@link getAccessibleText} is what is heard and {@link getPieces} is what is drawn, and
+ * a spec that only asserted the second would pass on a component that announces
+ * `W. e. l. c. o. m. e.` {@link getRenderedText} closes the loop: the split has to be
+ * lossless, and comparing it against the accessible copy is what catches a dropped space
+ * or a halved surrogate pair. (Whether the hidden copy is really off-screen is CSS —
+ * `clip-path` and a 1px box — and a test running no stylesheets cannot tell a correctly
+ * hidden span from one printing the string twice, so nothing here claims to.)
+ *
+ * **{@link hasStagedMotion} is the one thing about the tween worth pinning**, and it
+ * reports that the pieces were taken over rather than that anything is moving. Under
+ * reduced motion the component returns before touching them, which is the promise: a
+ * reader who asked for less motion must never be left with text staged at `opacity: 0`
+ * by an animation that then never runs.
+ *
+ * Driving the reveal is the spec's job, since jsdom supplies neither half of it:
+ *
+ * ```ts
+ * // Before TestBed.createComponent — keep the callbacks so the spec can fire them.
+ * vi.stubGlobal('IntersectionObserver', StubObserver);
+ * // Otherwise `el.animate(...)` throws mid-stagger and leaves the DOM half-staged.
+ * Reflect.set(Element.prototype, 'animate', () => ({ cancel: () => undefined, onfinish: null }));
+ * ```
+ *
+ * @example
+ * ```ts
+ * const text = await loader.getHarness(WrBlurTextHarness.with({ text: 'Welcome to ngwr' }));
+ *
+ * expect(await text.getPieces()).toEqual(['Welcome', 'to', 'ngwr']);
+ * expect(await text.getRenderedText()).toBe(await text.getAccessibleText());
+ * expect(await text.isTextHidden()).toBe(true);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrBlurTextHarness extends ComponentHarness {
+    static hostSelector = 'wr-blur-text';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrBlurTextHarness, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getAccessibleText(), text))
+            .addOption('pieceCount', options.pieceCount, async (harness, count) => (await harness.getPieceCount()) === count);
+    }
+    pieces = this.locatorForAll(PIECE);
+    spaces = this.locatorForAll(SPACE);
+    /**
+     * The whole string, as the one readable copy holds it.
+     *
+     * The only thing a screen reader gets, since every drawn piece is out of the tree —
+     * lose this span and the component becomes a nameless pile of hidden spans with no
+     * other symptom anywhere in the DOM.
+     *
+     * Untrimmed, deliberately. Leading and trailing whitespace is content the split has to
+     * carry through, and {@link getRenderedText} is meant to compare equal to this; a
+     * trimmed read on one side of that comparison would quietly forgive the case it exists
+     * to catch.
+     */
+    async getAccessibleText() {
+        return rawText(await this.locatorFor(SR_ONLY)());
+    }
+    /**
+     * The animated pieces, in document order — one per word or one per character.
+     *
+     * This is the split the stagger runs over: `['Hi', 'there']` for `animateBy="words"`
+     * against `['H', 'i', 't', 'h', 'e', 'r', 'e']` for `"chars"`, and `['a', '🚀']` for a
+     * surrogate pair the code-point split kept whole rather than halved into two broken
+     * glyphs. Whitespace is not here — it is rendered separately and never staggered, so
+     * see {@link getSpaceCount}.
+     */
+    async getPieces() {
+        return Promise.all((await this.pieces()).map(rawText));
+    }
+    /**
+     * How many pieces the stagger runs over.
+     *
+     * `delay` × this is the whole length of the effect, and it is the only number about
+     * the animation that exists in the document.
+     */
+    async getPieceCount() {
+        return (await this.pieces()).length;
+    }
+    /**
+     * How many whitespace runs sit between the pieces.
+     *
+     * Worth a method of its own because whitespace is deliberately NOT a staggered piece:
+     * a regression that reclassified spaces as pieces would leave {@link getRenderedText}
+     * identical, change the stagger count and the rhythm of the reveal, and show up
+     * nowhere else.
+     */
+    async getSpaceCount() {
+        return (await this.spaces()).length;
+    }
+    /**
+     * Everything the component drew, pieces and spaces together, in document order.
+     *
+     * The assertion this exists for is `getRenderedText() === getAccessibleText()`: the
+     * split must be lossless. A swallowed space, a re-split that dropped a character, or a
+     * surrogate pair cut in half all leave the accessible copy untouched and are invisible
+     * from anywhere else.
+     */
+    async getRenderedText() {
+        const parts = await this.locatorForAll(`${PIECE}, ${SPACE}`)();
+        return (await Promise.all(parts.map(rawText))).join('');
+    }
+    /**
+     * Whether every drawn piece is out of the accessibility tree.
+     *
+     * The defect this component exists to avoid is a screen reader reading
+     * `W. e. l. c. o. m. e.`, and one piece missing `aria-hidden` is enough to bring it
+     * back — so this is all-or-nothing, and across both element kinds: a stray readable
+     * space is heard as a pause in the middle of a word.
+     *
+     * Throws when the split produced nothing at all. An empty run of elements satisfies
+     * "every one of them is hidden" without anything being hidden, which is the answer a
+     * component that stopped rendering its pieces would also give.
+     */
+    async isTextHidden() {
+        const parts = await this.locatorForAll(`${PIECE}, ${SPACE}`)();
+        if (parts.length === 0) {
+            throw new Error('WrBlurTextHarness.isTextHidden(): this <wr-blur-text> drew no pieces, so there is nothing to be ' +
+                'hidden from a screen reader and "true" would be a vacuous answer — the same one a component that ' +
+                'stopped splitting its text would give. Check `text` is set, or ask getPieceCount().');
+        }
+        const hidden = await Promise.all(parts.map(part => part.getAttribute('aria-hidden')));
+        return hidden.every(value => value === 'true');
+    }
+    /**
+     * Whether the reveal has taken the pieces over — NOT whether anything is animating.
+     *
+     * Read off the inline `style` attribute the component writes itself, so it stays
+     * `true` after the reveal finishes: the tween commits its end state back to the same
+     * inline properties on `onfinish`. Anyone reaching for `isAnimating()` wants a frame,
+     * and there are no frames here.
+     *
+     * `false` is the answer worth asserting. It means no piece was written to at all,
+     * which is both the pre-trigger state and the reduced-motion promise — the component
+     * returns before staging anything, so a reader who asked for less motion cannot be
+     * left staring at text parked at `opacity: 0` by an animation that never runs.
+     *
+     * ANY piece counts, not all of them, and that is the conservative reading rather than
+     * a loose one: a stagger that stages the first piece and then throws leaves exactly one
+     * piece invisible, which is a real failure and one jsdom reproduces whenever
+     * `Element.prototype.animate` is missing.
+     */
+    async hasStagedMotion() {
+        const styles = await Promise.all((await this.pieces()).map(piece => piece.getAttribute('style')));
+        return styles.some(style => INLINE_OPACITY.test(style ?? ''));
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrBlurTextHarness };
+//# sourceMappingURL=ngwr-blur-text-testing.mjs.map

package/fesm2022/ngwr-blur-text-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-blur-text-testing.mjs","sources":["../../../projects/lib/blur-text/testing/wr-blur-text-harness.ts","../../../projects/lib/blur-text/testing/ngwr-blur-text-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate, type TestElement } from '@angular/cdk/testing';\n\nimport type { WrBlurTextHarnessFilters } from './interfaces';\n\n/** The animated pieces — one per word or per character, whitespace excluded. */\nconst PIECE = '.wr-blur-text__piece';\n\n/** The whitespace runs between them, rendered but never staggered. */\nconst SPACE = '.wr-blur-text__space';\n\n/** The readable copy of the string, carried once and hidden with CSS. */\nconst SR_ONLY = '.wr-blur-text__sr-only';\n\n/**\n * An inline `opacity` declaration — the one property the reveal writes on every path.\n *\n * It is staged before the tween starts and re-committed when it finishes, so its\n * presence is the durable evidence that the component touched a piece at all. Matched\n * off the `style` ATTRIBUTE rather than through `getCssValue`, which would answer from\n * a computed style and report `1` for a piece nobody ever wrote to.\n */\nconst INLINE_OPACITY = /(?:^|;)\\s*opacity\\s*:/;\n\n/** Exactly what the element holds — untrimmed, unlike `TestElement.text()`. */\nasync function rawText(element: TestElement): Promise<string> {\n  return (await element.getProperty<string | null>('textContent')) ?? '';\n}\n\n/**\n * Test harness for `<wr-blur-text>`.\n *\n * **Most of what this component does cannot be read from a test, and the methods that\n * are missing are missing on purpose.** The reveal is a Web Animations tween per piece\n * — blur, vertical offset and opacity, staggered — started by an `IntersectionObserver`.\n * A unit test has no layout, no compositor and no WAAPI, so there is no\n * `getOpacity()`, no `getBlurRadius()` and no `getOffset()`: each would report the\n * staged from-state forever in jsdom, and in a real browser it would report the inline\n * value while the compositor paints a different one. There is no `isAnimating()` and no\n * `whenAnimationComplete()` either — nothing in the DOM says a tween is running, and\n * completion is the `animationComplete` OUTPUT, which the host binds. Nor is there an\n * `enterViewport()` / `scrollIntoView()`: the trigger is an observer, which a\n * `TestElement` cannot reach, and a method that pretended to scroll would do nothing in\n * jsdom and something untimed in a browser. The inputs that shape the tween —\n * `direction`, `delay`, `stepDuration`, `easing` — never reach the DOM at all; they live\n * in a keyframe array and an effect timing, and neither is a document.\n *\n * **What is real is the split and the accessible layer, and they are two questions.**\n * The string is carried once in a visually-hidden span, and every animated piece is\n * `aria-hidden` so a screen reader does not spell the text out letter by letter — so\n * {@link getAccessibleText} is what is heard and {@link getPieces} is what is drawn, and\n * a spec that only asserted the second would pass on a component that announces\n * `W. e. l. c. o. m. e.` {@link getRenderedText} closes the loop: the split has to be\n * lossless, and comparing it against the accessible copy is what catches a dropped space\n * or a halved surrogate pair. (Whether the hidden copy is really off-screen is CSS —\n * `clip-path` and a 1px box — and a test running no stylesheets cannot tell a correctly\n * hidden span from one printing the string twice, so nothing here claims to.)\n *\n * **{@link hasStagedMotion} is the one thing about the tween worth pinning**, and it\n * reports that the pieces were taken over rather than that anything is moving. Under\n * reduced motion the component returns before touching them, which is the promise: a\n * reader who asked for less motion must never be left with text staged at `opacity: 0`\n * by an animation that then never runs.\n *\n * Driving the reveal is the spec's job, since jsdom supplies neither half of it:\n *\n * ```ts\n * // Before TestBed.createComponent — keep the callbacks so the spec can fire them.\n * vi.stubGlobal('IntersectionObserver', StubObserver);\n * // Otherwise `el.animate(...)` throws mid-stagger and leaves the DOM half-staged.\n * Reflect.set(Element.prototype, 'animate', () => ({ cancel: () => undefined, onfinish: null }));\n * ```\n *\n * @example\n * ```ts\n * const text = await loader.getHarness(WrBlurTextHarness.with({ text: 'Welcome to ngwr' }));\n *\n * expect(await text.getPieces()).toEqual(['Welcome', 'to', 'ngwr']);\n * expect(await text.getRenderedText()).toBe(await text.getAccessibleText());\n * expect(await text.isTextHidden()).toBe(true);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrBlurTextHarness extends ComponentHarness {\n  static hostSelector = 'wr-blur-text';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrBlurTextHarnessFilters = {}): HarnessPredicate<WrBlurTextHarness> {\n    return new HarnessPredicate(WrBlurTextHarness, options)\n      .addOption('text', options.text, (harness, text) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleText(), text)\n      )\n      .addOption('pieceCount', options.pieceCount, async (harness, count) => (await harness.getPieceCount()) === count);\n  }\n\n  private readonly pieces = this.locatorForAll(PIECE);\n  private readonly spaces = this.locatorForAll(SPACE);\n\n  /**\n   * The whole string, as the one readable copy holds it.\n   *\n   * The only thing a screen reader gets, since every drawn piece is out of the tree —\n   * lose this span and the component becomes a nameless pile of hidden spans with no\n   * other symptom anywhere in the DOM.\n   *\n   * Untrimmed, deliberately. Leading and trailing whitespace is content the split has to\n   * carry through, and {@link getRenderedText} is meant to compare equal to this; a\n   * trimmed read on one side of that comparison would quietly forgive the case it exists\n   * to catch.\n   */\n  async getAccessibleText(): Promise<string> {\n    return rawText(await this.locatorFor(SR_ONLY)());\n  }\n\n  /**\n   * The animated pieces, in document order — one per word or one per character.\n   *\n   * This is the split the stagger runs over: `['Hi', 'there']` for `animateBy=\"words\"`\n   * against `['H', 'i', 't', 'h', 'e', 'r', 'e']` for `\"chars\"`, and `['a', '🚀']` for a\n   * surrogate pair the code-point split kept whole rather than halved into two broken\n   * glyphs. Whitespace is not here — it is rendered separately and never staggered, so\n   * see {@link getSpaceCount}.\n   */\n  async getPieces(): Promise<string[]> {\n    return Promise.all((await this.pieces()).map(rawText));\n  }\n\n  /**\n   * How many pieces the stagger runs over.\n   *\n   * `delay` × this is the whole length of the effect, and it is the only number about\n   * the animation that exists in the document.\n   */\n  async getPieceCount(): Promise<number> {\n    return (await this.pieces()).length;\n  }\n\n  /**\n   * How many whitespace runs sit between the pieces.\n   *\n   * Worth a method of its own because whitespace is deliberately NOT a staggered piece:\n   * a regression that reclassified spaces as pieces would leave {@link getRenderedText}\n   * identical, change the stagger count and the rhythm of the reveal, and show up\n   * nowhere else.\n   */\n  async getSpaceCount(): Promise<number> {\n    return (await this.spaces()).length;\n  }\n\n  /**\n   * Everything the component drew, pieces and spaces together, in document order.\n   *\n   * The assertion this exists for is `getRenderedText() === getAccessibleText()`: the\n   * split must be lossless. A swallowed space, a re-split that dropped a character, or a\n   * surrogate pair cut in half all leave the accessible copy untouched and are invisible\n   * from anywhere else.\n   */\n  async getRenderedText(): Promise<string> {\n    const parts = await this.locatorForAll(`${PIECE}, ${SPACE}`)();\n    return (await Promise.all(parts.map(rawText))).join('');\n  }\n\n  /**\n   * Whether every drawn piece is out of the accessibility tree.\n   *\n   * The defect this component exists to avoid is a screen reader reading\n   * `W. e. l. c. o. m. e.`, and one piece missing `aria-hidden` is enough to bring it\n   * back — so this is all-or-nothing, and across both element kinds: a stray readable\n   * space is heard as a pause in the middle of a word.\n   *\n   * Throws when the split produced nothing at all. An empty run of elements satisfies\n   * \"every one of them is hidden\" without anything being hidden, which is the answer a\n   * component that stopped rendering its pieces would also give.\n   */\n  async isTextHidden(): Promise<boolean> {\n    const parts = await this.locatorForAll(`${PIECE}, ${SPACE}`)();\n\n    if (parts.length === 0) {\n      throw new Error(\n        'WrBlurTextHarness.isTextHidden(): this <wr-blur-text> drew no pieces, so there is nothing to be ' +\n          'hidden from a screen reader and \"true\" would be a vacuous answer — the same one a component that ' +\n          'stopped splitting its text would give. Check `text` is set, or ask getPieceCount().'\n      );\n    }\n\n    const hidden = await Promise.all(parts.map(part => part.getAttribute('aria-hidden')));\n    return hidden.every(value => value === 'true');\n  }\n\n  /**\n   * Whether the reveal has taken the pieces over — NOT whether anything is animating.\n   *\n   * Read off the inline `style` attribute the component writes itself, so it stays\n   * `true` after the reveal finishes: the tween commits its end state back to the same\n   * inline properties on `onfinish`. Anyone reaching for `isAnimating()` wants a frame,\n   * and there are no frames here.\n   *\n   * `false` is the answer worth asserting. It means no piece was written to at all,\n   * which is both the pre-trigger state and the reduced-motion promise — the component\n   * returns before staging anything, so a reader who asked for less motion cannot be\n   * left staring at text parked at `opacity: 0` by an animation that never runs.\n   *\n   * ANY piece counts, not all of them, and that is the conservative reading rather than\n   * a loose one: a stagger that stages the first piece and then throws leaves exactly one\n   * piece invisible, which is a real failure and one jsdom reproduces whenever\n   * `Element.prototype.animate` is missing.\n   */\n  async hasStagedMotion(): Promise<boolean> {\n    const styles = await Promise.all((await this.pieces()).map(piece => piece.getAttribute('style')));\n    return styles.some(style => INLINE_OPACITY.test(style ?? ''));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-blur-text.mjs

@@ -80,9 +80,22 @@ class WrBlurText {
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
     platform = inject(WrPlatform);
     hasAnimated = false;
+    /**
+     * The ONE observer, replaced rather than stacked.
+     *
+     * `startObserver()` used to `new IntersectionObserver(…)` and register its own
+     * `destroyRef.onDestroy` every time, and the effect below calls it on every
+     * `text` change after setting `hasAnimated = false` — so the guard at the top
+     * of `startObserver` never blocked that path. An off-screen element (the only
+     * case where the observer does not immediately disconnect itself) therefore
+     * leaked one live observer AND one destroy callback per change, all of them
+     * watching the same host and all of them able to fire `animate()`.
+     */
+    observer = null;
     constructor() {
         if (!this.isBrowser)
             return;
+        this.destroyRef.onDestroy(() => this.observer?.disconnect());
         afterNextRender(() => this.startObserver());
         effect(() => {
             this.text();
@@ -95,6 +108,7 @@ class WrBlurText {
         if (this.hasAnimated)
             return;
         const host = this.host.nativeElement;
+        this.observer?.disconnect();
         const io = new IntersectionObserver((entries, obs) => {
             for (const e of entries) {
                 if (e.isIntersecting) {
@@ -104,8 +118,8 @@ class WrBlurText {
                 }
             }
         }, { threshold: this.threshold(), rootMargin: this.rootMargin() });
+        this.observer = io;
         io.observe(host);
-        this.destroyRef.onDestroy(() => io.disconnect());
     }
     animate() {
         if (this.hasAnimated)

package/fesm2022/ngwr-blur-text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-blur-text.mjs","sources":["../../../projects/lib/blur-text/blur-text.ts","../../../projects/lib/blur-text/blur-text.html","../../../projects/lib/blur-text/ngwr-blur-text.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n *\n * Angular adaptation of the BlurText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/blur-text\n *\n * The reactbits version uses `motion/react` (framer-motion successor).\n * This port is dependency-free — uses the Web Animations API for the\n * three-keyframe blur-and-fade-in, triggered by `IntersectionObserver`.\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\ntype Unit = 'chars' | 'words';\ntype Direction = 'top' | 'bottom';\ntype Piece = { readonly kind: 'piece'; readonly text: string } | { readonly kind: 'space'; readonly text: string };\n\nfunction splitPieces(text: string, unit: Unit): readonly Piece[] {\n  if (!text) return [];\n  if (unit === 'words') {\n    return text.split(/(\\s+)/).flatMap<Piece>(seg => {\n      if (seg.length === 0) return [];\n      if (/^\\s+$/.test(seg)) return [{ kind: 'space', text: seg }];\n      return [{ kind: 'piece', text: seg }];\n    });\n  }\n  return [...text].map<Piece>(ch => (/\\s/.test(ch) ? { kind: 'space', text: ch } : { kind: 'piece', text: ch }));\n}\n\n/**\n * Reveals text by splitting it into chars or words and animating each\n * piece in from a blurred / offset state through a brief mid-step into\n * the steady state. Triggers when the host enters the viewport.\n *\n * @example\n * ```html\n * <wr-blur-text\n *   text=\"Welcome to ngwr\"\n *   animateBy=\"words\"\n *   direction=\"top\"\n *   [delay]=\"120\"\n *   [stepDuration]=\"0.4\"\n * />\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/blur-text\n */\n@Component({\n  selector: 'wr-blur-text',\n  templateUrl: './blur-text.html',\n  styleUrl: './blur-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-blur-text' },\n})\nexport class WrBlurText {\n  /** Text to animate. Required. */\n  readonly text = input.required<string>();\n\n  /** Split granularity. @default 'words' */\n  readonly animateBy = input<Unit>('words');\n\n  /** Entry direction. `'top'` slides down into place; `'bottom'` slides up. @default 'top' */\n  readonly direction = input<Direction>('top');\n\n  /** Per-piece stagger in ms. @default 200 */\n  readonly delay = input(200, { transform: numAttr(200) });\n\n  /** Duration of each keyframe step in seconds (total = 2 × stepDuration). @default 0.35 */\n  readonly stepDuration = input(0.35, { transform: numAttr(0.35) });\n\n  /** CSS easing function. @default 'linear' (matches reactbits' identity easing) */\n  readonly easing = input('linear');\n\n  /** `IntersectionObserver.threshold` (0..1). @default 0.1 */\n  readonly threshold = input(0.1, { transform: numAttr(0.1) });\n\n  /** `IntersectionObserver.rootMargin`. @default '0px' */\n  readonly rootMargin = input('0px');\n\n  /** Emitted once all pieces finish animating. */\n  readonly animationComplete = output<void>();\n\n  protected readonly pieces = computed(() => splitPieces(this.text(), this.animateBy()));\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n\n  private hasAnimated = false;\n\n  constructor() {\n    if (!this.isBrowser) return;\n    afterNextRender(() => this.startObserver());\n    effect(() => {\n      this.text();\n      this.animateBy();\n      this.hasAnimated = false;\n      queueMicrotask(() => this.startObserver());\n    });\n  }\n\n  private startObserver(): void {\n    if (this.hasAnimated) return;\n    const host = this.host.nativeElement;\n    const io = new IntersectionObserver(\n      (entries, obs) => {\n        for (const e of entries) {\n          if (e.isIntersecting) {\n            obs.disconnect();\n            this.animate();\n            break;\n          }\n        }\n      },\n      { threshold: this.threshold(), rootMargin: this.rootMargin() }\n    );\n    io.observe(host);\n    this.destroyRef.onDestroy(() => io.disconnect());\n  }\n\n  private animate(): void {\n    if (this.hasAnimated) return;\n    this.hasAnimated = true;\n\n    // Reduced motion: pieces already render clear and in place — skip\n    // the blur tween and report completion right away.\n    if (this.platform.prefersReducedMotion()) {\n      this.animationComplete.emit();\n      return;\n    }\n\n    const targets = this.host.nativeElement.querySelectorAll<HTMLElement>('.wr-blur-text__piece');\n    if (targets.length === 0) {\n      this.animationComplete.emit();\n      return;\n    }\n\n    const dir = this.direction();\n    const stepMs = this.stepDuration() * 1000;\n    const totalMs = stepMs * 2;\n    const stagger = this.delay();\n    const easing = this.easing();\n\n    // Three-keyframe shape per reactbits:\n    //   0    → fully blurred, offset, transparent\n    //   50%  → half-blur, half-opacity, small reverse offset\n    //   100% → clear, opaque, at rest\n    const startY = dir === 'top' ? -50 : 50;\n    const midY = dir === 'top' ? 5 : -5;\n    const keyframes: Keyframe[] = [\n      { opacity: 0, filter: 'blur(10px)', transform: `translate3d(0, ${startY}px, 0)` },\n      { opacity: 0.5, filter: 'blur(5px)', transform: `translate3d(0, ${midY}px, 0)`, offset: 0.5 },\n      { opacity: 1, filter: 'blur(0px)', transform: 'translate3d(0, 0, 0)' },\n    ];\n\n    let remaining = targets.length;\n    targets.forEach((el, i) => {\n      el.style.opacity = '0';\n      el.style.filter = 'blur(10px)';\n      el.style.transform = `translate3d(0, ${startY}px, 0)`;\n      const animation = el.animate(keyframes, {\n        duration: totalMs,\n        delay: i * stagger,\n        easing,\n        fill: 'forwards',\n      });\n      animation.onfinish = (): void => {\n        el.style.opacity = '1';\n        el.style.filter = 'blur(0px)';\n        el.style.transform = 'translate3d(0, 0, 0)';\n        try {\n          animation.cancel();\n        } catch {\n          /* noop */\n        }\n        remaining -= 1;\n        if (remaining === 0) this.animationComplete.emit();\n      };\n    });\n  }\n}\n","<!-- The readable text, once: the pieces below are per-character spans. -->\n<span class=\"wr-blur-text__sr-only\">{{ text() }}</span>\n@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\" aria-hidden=\"true\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\" aria-hidden=\"true\">{{ p.text }}</span>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-blur-text.mjs","sources":["../../../projects/lib/blur-text/blur-text.ts","../../../projects/lib/blur-text/blur-text.html","../../../projects/lib/blur-text/ngwr-blur-text.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n *\n * Angular adaptation of the BlurText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/blur-text\n *\n * The reactbits version uses `motion/react` (framer-motion successor).\n * This port is dependency-free — uses the Web Animations API for the\n * three-keyframe blur-and-fade-in, triggered by `IntersectionObserver`.\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\ntype Unit = 'chars' | 'words';\ntype Direction = 'top' | 'bottom';\ntype Piece = { readonly kind: 'piece'; readonly text: string } | { readonly kind: 'space'; readonly text: string };\n\nfunction splitPieces(text: string, unit: Unit): readonly Piece[] {\n  if (!text) return [];\n  if (unit === 'words') {\n    return text.split(/(\\s+)/).flatMap<Piece>(seg => {\n      if (seg.length === 0) return [];\n      if (/^\\s+$/.test(seg)) return [{ kind: 'space', text: seg }];\n      return [{ kind: 'piece', text: seg }];\n    });\n  }\n  return [...text].map<Piece>(ch => (/\\s/.test(ch) ? { kind: 'space', text: ch } : { kind: 'piece', text: ch }));\n}\n\n/**\n * Reveals text by splitting it into chars or words and animating each\n * piece in from a blurred / offset state through a brief mid-step into\n * the steady state. Triggers when the host enters the viewport.\n *\n * @example\n * ```html\n * <wr-blur-text\n *   text=\"Welcome to ngwr\"\n *   animateBy=\"words\"\n *   direction=\"top\"\n *   [delay]=\"120\"\n *   [stepDuration]=\"0.4\"\n * />\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/blur-text\n */\n@Component({\n  selector: 'wr-blur-text',\n  templateUrl: './blur-text.html',\n  styleUrl: './blur-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-blur-text' },\n})\nexport class WrBlurText {\n  /** Text to animate. Required. */\n  readonly text = input.required<string>();\n\n  /** Split granularity. @default 'words' */\n  readonly animateBy = input<Unit>('words');\n\n  /** Entry direction. `'top'` slides down into place; `'bottom'` slides up. @default 'top' */\n  readonly direction = input<Direction>('top');\n\n  /** Per-piece stagger in ms. @default 200 */\n  readonly delay = input(200, { transform: numAttr(200) });\n\n  /** Duration of each keyframe step in seconds (total = 2 × stepDuration). @default 0.35 */\n  readonly stepDuration = input(0.35, { transform: numAttr(0.35) });\n\n  /** CSS easing function. @default 'linear' (matches reactbits' identity easing) */\n  readonly easing = input('linear');\n\n  /** `IntersectionObserver.threshold` (0..1). @default 0.1 */\n  readonly threshold = input(0.1, { transform: numAttr(0.1) });\n\n  /** `IntersectionObserver.rootMargin`. @default '0px' */\n  readonly rootMargin = input('0px');\n\n  /** Emitted once all pieces finish animating. */\n  readonly animationComplete = output<void>();\n\n  protected readonly pieces = computed(() => splitPieces(this.text(), this.animateBy()));\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n\n  private hasAnimated = false;\n\n  /**\n   * The ONE observer, replaced rather than stacked.\n   *\n   * `startObserver()` used to `new IntersectionObserver(…)` and register its own\n   * `destroyRef.onDestroy` every time, and the effect below calls it on every\n   * `text` change after setting `hasAnimated = false` — so the guard at the top\n   * of `startObserver` never blocked that path. An off-screen element (the only\n   * case where the observer does not immediately disconnect itself) therefore\n   * leaked one live observer AND one destroy callback per change, all of them\n   * watching the same host and all of them able to fire `animate()`.\n   */\n  private observer: IntersectionObserver | null = null;\n\n  constructor() {\n    if (!this.isBrowser) return;\n    this.destroyRef.onDestroy(() => this.observer?.disconnect());\n    afterNextRender(() => this.startObserver());\n    effect(() => {\n      this.text();\n      this.animateBy();\n      this.hasAnimated = false;\n      queueMicrotask(() => this.startObserver());\n    });\n  }\n\n  private startObserver(): void {\n    if (this.hasAnimated) return;\n    const host = this.host.nativeElement;\n    this.observer?.disconnect();\n    const io = new IntersectionObserver(\n      (entries, obs) => {\n        for (const e of entries) {\n          if (e.isIntersecting) {\n            obs.disconnect();\n            this.animate();\n            break;\n          }\n        }\n      },\n      { threshold: this.threshold(), rootMargin: this.rootMargin() }\n    );\n    this.observer = io;\n    io.observe(host);\n  }\n\n  private animate(): void {\n    if (this.hasAnimated) return;\n    this.hasAnimated = true;\n\n    // Reduced motion: pieces already render clear and in place — skip\n    // the blur tween and report completion right away.\n    if (this.platform.prefersReducedMotion()) {\n      this.animationComplete.emit();\n      return;\n    }\n\n    const targets = this.host.nativeElement.querySelectorAll<HTMLElement>('.wr-blur-text__piece');\n    if (targets.length === 0) {\n      this.animationComplete.emit();\n      return;\n    }\n\n    const dir = this.direction();\n    const stepMs = this.stepDuration() * 1000;\n    const totalMs = stepMs * 2;\n    const stagger = this.delay();\n    const easing = this.easing();\n\n    // Three-keyframe shape per reactbits:\n    //   0    → fully blurred, offset, transparent\n    //   50%  → half-blur, half-opacity, small reverse offset\n    //   100% → clear, opaque, at rest\n    const startY = dir === 'top' ? -50 : 50;\n    const midY = dir === 'top' ? 5 : -5;\n    const keyframes: Keyframe[] = [\n      { opacity: 0, filter: 'blur(10px)', transform: `translate3d(0, ${startY}px, 0)` },\n      { opacity: 0.5, filter: 'blur(5px)', transform: `translate3d(0, ${midY}px, 0)`, offset: 0.5 },\n      { opacity: 1, filter: 'blur(0px)', transform: 'translate3d(0, 0, 0)' },\n    ];\n\n    let remaining = targets.length;\n    targets.forEach((el, i) => {\n      el.style.opacity = '0';\n      el.style.filter = 'blur(10px)';\n      el.style.transform = `translate3d(0, ${startY}px, 0)`;\n      const animation = el.animate(keyframes, {\n        duration: totalMs,\n        delay: i * stagger,\n        easing,\n        fill: 'forwards',\n      });\n      animation.onfinish = (): void => {\n        el.style.opacity = '1';\n        el.style.filter = 'blur(0px)';\n        el.style.transform = 'translate3d(0, 0, 0)';\n        try {\n          animation.cancel();\n        } catch {\n          /* noop */\n        }\n        remaining -= 1;\n        if (remaining === 0) this.animationComplete.emit();\n      };\n    });\n  }\n}\n","<!-- The readable text, once: the pieces below are per-character spans. -->\n<span class=\"wr-blur-text__sr-only\">{{ text() }}</span>\n@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\" aria-hidden=\"true\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\" aria-hidden=\"true\">{{ p.text }}</span>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}