ngwr 6.1.1 → 7.1.0

package/fesm2022/ngwr-typewriter.mjs

@@ -0,0 +1,229 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, inject, ElementRef, DestroyRef, PLATFORM_ID, afterNextRender, ViewEncapsulation, Component } from '@angular/core';
+import { WrPlatform } from 'ngwr/platform';
+import { numAttr } from 'ngwr/utils';
+
+/**
+ * @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
+ *
+ * Angular adaptation of the TextType effect by David Haz / reactbits.dev.
+ * Original: https://www.reactbits.dev/text-animations/text-type
+ *
+ * The reactbits version uses GSAP for the cursor blink. This port is
+ * dependency-free — vanilla `setTimeout` loop for typing/deleting,
+ * pure-CSS keyframes for the cursor blink.
+ */
+/**
+ * Classic typewriter — types out a string char-by-char, optionally
+ * deletes it, then types the next string. Cycles through `[texts]` (or
+ * a single string) with a blinking cursor.
+ *
+ * @example
+ * ```html
+ * <wr-typewriter [texts]="['design.', 'ship.', 'iterate.']" />
+ * <wr-typewriter
+ *   text="Hello, ngwr."
+ *   [loop]="false"
+ *   [typingSpeed]="35"
+ *   cursorCharacter="▎"
+ * />
+ * ```
+ *
+ * @see https://www.reactbits.dev/text-animations/text-type
+ */
+class WrTypewriter {
+    /** Single string. Use either `text` or `texts`. */
+    text = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Strings to cycle. Use either `text` or `texts`. */
+    texts = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+    /** Per-char typing speed in ms. @default 50 */
+    typingSpeed = input(50, { ...(ngDevMode ? { debugName: "typingSpeed" } : /* istanbul ignore next */ {}), transform: numAttr(50) });
+    /** Initial delay before typing starts, in ms. @default 0 */
+    initialDelay = input(0, { ...(ngDevMode ? { debugName: "initialDelay" } : /* istanbul ignore next */ {}), transform: numAttr(0) });
+    /** Pause between sentences (after typing complete, before deleting), in ms. @default 2000 */
+    pauseDuration = input(2000, { ...(ngDevMode ? { debugName: "pauseDuration" } : /* istanbul ignore next */ {}), transform: numAttr(2000) });
+    /** Per-char deletion speed in ms. @default 30 */
+    deletingSpeed = input(30, { ...(ngDevMode ? { debugName: "deletingSpeed" } : /* istanbul ignore next */ {}), transform: numAttr(30) });
+    /** Loop back to the first string after the last. @default true */
+    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Show the cursor. @default true */
+    showCursor = input(true, { ...(ngDevMode ? { debugName: "showCursor" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Hide the cursor while typing / deleting. @default false */
+    hideCursorWhileTyping = input(false, { ...(ngDevMode ? { debugName: "hideCursorWhileTyping" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Cursor glyph. @default '|' */
+    cursorCharacter = input('|', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cursorCharacter" }] : /* istanbul ignore next */ []));
+    /** Cursor blink half-cycle in seconds. @default 0.5 */
+    cursorBlinkDuration = input(0.5, { ...(ngDevMode ? { debugName: "cursorBlinkDuration" } : /* istanbul ignore next */ {}), transform: numAttr(0.5) });
+    /** Cycle through these colours per string. */
+    textColors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textColors" }] : /* istanbul ignore next */ []));
+    /** Randomise typing speed per char between `min` and `max`. */
+    variableSpeed = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variableSpeed" }] : /* istanbul ignore next */ []));
+    /** Reverse the string (type it backwards). @default false */
+    reverseMode = input(false, { ...(ngDevMode ? { debugName: "reverseMode" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Start typing only after the host enters the viewport. @default false */
+    startOnVisible = input(false, { ...(ngDevMode ? { debugName: "startOnVisible" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Emits with `(text, index)` when a string finishes typing. */
+    sentenceComplete = output();
+    displayed = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayed" }] : /* istanbul ignore next */ []));
+    cursorVisible = computed(() => {
+        if (!this.showCursor())
+            return false;
+        if (!this.hideCursorWhileTyping())
+            return true;
+        // While typing or deleting, cursor stays hidden.
+        return this.phase() === 'idle';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cursorVisible" }] : /* istanbul ignore next */ []));
+    activeColor = computed(() => {
+        const colours = this.textColors();
+        if (colours.length === 0)
+            return 'inherit';
+        return colours[this.currentTextIndex() % colours.length];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
+    /** Resolved list of strings (either `texts` or wrap `text` in an array). */
+    textArray = computed(() => {
+        const list = this.texts();
+        if (list && list.length > 0)
+            return list;
+        const single = this.text();
+        return single ? [single] : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textArray" }] : /* istanbul ignore next */ []));
+    currentTextIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentTextIndex" }] : /* istanbul ignore next */ []));
+    phase = signal('idle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    platform = inject(WrPlatform);
+    timer;
+    isVisible = false;
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => this.boot());
+        this.destroyRef.onDestroy(() => clearTimeout(this.timer));
+    }
+    boot() {
+        if (this.startOnVisible()) {
+            const io = new IntersectionObserver((entries, obs) => {
+                for (const e of entries) {
+                    if (e.isIntersecting) {
+                        obs.disconnect();
+                        this.isVisible = true;
+                        this.scheduleNext(this.initialDelay());
+                        break;
+                    }
+                }
+            }, { threshold: 0.1 });
+            io.observe(this.host.nativeElement);
+            this.destroyRef.onDestroy(() => io.disconnect());
+        }
+        else {
+            this.isVisible = true;
+            this.scheduleNext(this.initialDelay());
+        }
+    }
+    scheduleNext(delay) {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => this.tick(), delay);
+    }
+    tick() {
+        if (!this.isVisible)
+            return;
+        const arr = this.textArray();
+        if (arr.length === 0)
+            return;
+        const idx = this.currentTextIndex();
+        const raw = arr[idx];
+        const target = this.reverseMode() ? raw.split('').reverse().join('') : raw;
+        const displayed = this.displayed();
+        // Reduced motion: show each sentence whole — no per-char typing or
+        // deleting. Multi-text setups still advance on the pause cadence,
+        // since the sentence swap itself is content, not decoration.
+        if (this.platform.prefersReducedMotion()) {
+            if (displayed !== target) {
+                this.displayed.set(target);
+                this.phase.set('idle');
+                this.sentenceComplete.emit({ text: raw, index: idx });
+            }
+            if (arr.length === 1 || (!this.loop() && idx === arr.length - 1))
+                return;
+            this.currentTextIndex.set((idx + 1) % arr.length);
+            this.scheduleNext(this.pauseDuration());
+            return;
+        }
+        if (this.phase() === 'deleting') {
+            if (displayed.length === 0) {
+                // Finished deleting → advance to next text.
+                this.phase.set('idle');
+                const nextIndex = (idx + 1) % arr.length;
+                // Non-loop: stop if we just finished the last sentence.
+                if (!this.loop() && idx === arr.length - 1)
+                    return;
+                this.currentTextIndex.set(nextIndex);
+                this.scheduleNext(this.pauseDuration());
+                return;
+            }
+            // Continue deleting.
+            this.displayed.set(displayed.slice(0, -1));
+            this.scheduleNext(this.deletingSpeed());
+            return;
+        }
+        // Typing or idle.
+        if (displayed.length < target.length) {
+            this.phase.set('typing');
+            this.displayed.set(target.slice(0, displayed.length + 1));
+            const delay = this.variableSpeed()
+                ? Math.random() * (this.variableSpeed().max - this.variableSpeed().min) + this.variableSpeed().min
+                : this.typingSpeed();
+            this.scheduleNext(delay);
+            return;
+        }
+        // Typing complete for this sentence.
+        this.sentenceComplete.emit({ text: raw, index: idx });
+        // Single text + no loop → stop here.
+        if (arr.length === 1 && !this.loop()) {
+            this.phase.set('idle');
+            return;
+        }
+        // Non-loop on last sentence → stop here.
+        if (!this.loop() && idx === arr.length - 1) {
+            this.phase.set('idle');
+            return;
+        }
+        // Start deleting after the pause.
+        this.phase.set('deleting');
+        this.scheduleNext(this.pauseDuration());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTypewriter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrTypewriter, isStandalone: true, selector: "wr-typewriter", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: false, transformFunction: null }, typingSpeed: { classPropertyName: "typingSpeed", publicName: "typingSpeed", isSignal: true, isRequired: false, transformFunction: null }, initialDelay: { classPropertyName: "initialDelay", publicName: "initialDelay", isSignal: true, isRequired: false, transformFunction: null }, pauseDuration: { classPropertyName: "pauseDuration", publicName: "pauseDuration", isSignal: true, isRequired: false, transformFunction: null }, deletingSpeed: { classPropertyName: "deletingSpeed", publicName: "deletingSpeed", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, showCursor: { classPropertyName: "showCursor", publicName: "showCursor", isSignal: true, isRequired: false, transformFunction: null }, hideCursorWhileTyping: { classPropertyName: "hideCursorWhileTyping", publicName: "hideCursorWhileTyping", isSignal: true, isRequired: false, transformFunction: null }, cursorCharacter: { classPropertyName: "cursorCharacter", publicName: "cursorCharacter", isSignal: true, isRequired: false, transformFunction: null }, cursorBlinkDuration: { classPropertyName: "cursorBlinkDuration", publicName: "cursorBlinkDuration", isSignal: true, isRequired: false, transformFunction: null }, textColors: { classPropertyName: "textColors", publicName: "textColors", isSignal: true, isRequired: false, transformFunction: null }, variableSpeed: { classPropertyName: "variableSpeed", publicName: "variableSpeed", isSignal: true, isRequired: false, transformFunction: null }, reverseMode: { classPropertyName: "reverseMode", publicName: "reverseMode", isSignal: true, isRequired: false, transformFunction: null }, startOnVisible: { classPropertyName: "startOnVisible", publicName: "startOnVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sentenceComplete: "sentenceComplete" }, host: { properties: { "style.color": "activeColor()", "style.--wr-typewriter-cursor-blink": "cursorBlinkDuration() + 's'" }, classAttribute: "wr-typewriter" }, ngImport: i0, template: "<span class=\"wr-typewriter__content\">{{ displayed() }}</span>\n@if (cursorVisible()) {\n  <span class=\"wr-typewriter__cursor\" aria-hidden=\"true\">{{ cursorCharacter() }}</span>\n}\n", styles: [".wr-typewriter{--wr-typewriter-cursor-blink: .5s;display:inline-flex;align-items:baseline}.wr-typewriter__content{white-space:pre}.wr-typewriter__cursor{display:inline-block;margin-left:1px;animation:wr-typewriter-blink var(--wr-typewriter-cursor-blink) ease-in-out infinite alternate}@keyframes wr-typewriter-blink{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.wr-typewriter__cursor{animation:none;opacity:1}}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTypewriter, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-typewriter', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'wr-typewriter',
+                        '[style.color]': 'activeColor()',
+                        '[style.--wr-typewriter-cursor-blink]': "cursorBlinkDuration() + 's'",
+                    }, template: "<span class=\"wr-typewriter__content\">{{ displayed() }}</span>\n@if (cursorVisible()) {\n  <span class=\"wr-typewriter__cursor\" aria-hidden=\"true\">{{ cursorCharacter() }}</span>\n}\n", styles: [".wr-typewriter{--wr-typewriter-cursor-blink: .5s;display:inline-flex;align-items:baseline}.wr-typewriter__content{white-space:pre}.wr-typewriter__cursor{display:inline-block;margin-left:1px;animation:wr-typewriter-blink var(--wr-typewriter-cursor-blink) ease-in-out infinite alternate}@keyframes wr-typewriter-blink{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.wr-typewriter__cursor{animation:none;opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: false }] }], typingSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "typingSpeed", required: false }] }], initialDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialDelay", required: false }] }], pauseDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "pauseDuration", required: false }] }], deletingSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletingSpeed", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], showCursor: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCursor", required: false }] }], hideCursorWhileTyping: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCursorWhileTyping", required: false }] }], cursorCharacter: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursorCharacter", required: false }] }], cursorBlinkDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "cursorBlinkDuration", required: false }] }], textColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColors", required: false }] }], variableSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "variableSpeed", required: false }] }], reverseMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseMode", required: false }] }], startOnVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "startOnVisible", required: false }] }], sentenceComplete: [{ type: i0.Output, args: ["sentenceComplete"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrTypewriter };
+//# sourceMappingURL=ngwr-typewriter.mjs.map

package/fesm2022/ngwr-typewriter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-typewriter.mjs","sources":["../../../projects/lib/typewriter/typewriter.ts","../../../projects/lib/typewriter/typewriter.html","../../../projects/lib/typewriter/ngwr-typewriter.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 TextType effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/text-type\n *\n * The reactbits version uses GSAP for the cursor blink. This port is\n * dependency-free — vanilla `setTimeout` loop for typing/deleting,\n * pure-CSS keyframes for the cursor blink.\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrTypewriterVariableSpeed } from './interfaces';\n\n/**\n * Classic typewriter — types out a string char-by-char, optionally\n * deletes it, then types the next string. Cycles through `[texts]` (or\n * a single string) with a blinking cursor.\n *\n * @example\n * ```html\n * <wr-typewriter [texts]=\"['design.', 'ship.', 'iterate.']\" />\n * <wr-typewriter\n *   text=\"Hello, ngwr.\"\n *   [loop]=\"false\"\n *   [typingSpeed]=\"35\"\n *   cursorCharacter=\"▎\"\n * />\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/text-type\n */\n@Component({\n  selector: 'wr-typewriter',\n  templateUrl: './typewriter.html',\n  styleUrl: './typewriter.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-typewriter',\n    '[style.color]': 'activeColor()',\n    '[style.--wr-typewriter-cursor-blink]': \"cursorBlinkDuration() + 's'\",\n  },\n})\nexport class WrTypewriter {\n  /** Single string. Use either `text` or `texts`. */\n  readonly text = input<string | undefined>(undefined);\n\n  /** Strings to cycle. Use either `text` or `texts`. */\n  readonly texts = input<readonly string[] | undefined>(undefined);\n\n  /** Per-char typing speed in ms. @default 50 */\n  readonly typingSpeed = input(50, { transform: numAttr(50) });\n\n  /** Initial delay before typing starts, in ms. @default 0 */\n  readonly initialDelay = input(0, { transform: numAttr(0) });\n\n  /** Pause between sentences (after typing complete, before deleting), in ms. @default 2000 */\n  readonly pauseDuration = input(2000, { transform: numAttr(2000) });\n\n  /** Per-char deletion speed in ms. @default 30 */\n  readonly deletingSpeed = input(30, { transform: numAttr(30) });\n\n  /** Loop back to the first string after the last. @default true */\n  readonly loop = input(true, { transform: coerceBooleanProperty });\n\n  /** Show the cursor. @default true */\n  readonly showCursor = input(true, { transform: coerceBooleanProperty });\n\n  /** Hide the cursor while typing / deleting. @default false */\n  readonly hideCursorWhileTyping = input(false, { transform: coerceBooleanProperty });\n\n  /** Cursor glyph. @default '|' */\n  readonly cursorCharacter = input('|');\n\n  /** Cursor blink half-cycle in seconds. @default 0.5 */\n  readonly cursorBlinkDuration = input(0.5, { transform: numAttr(0.5) });\n\n  /** Cycle through these colours per string. */\n  readonly textColors = input<readonly string[]>([]);\n\n  /** Randomise typing speed per char between `min` and `max`. */\n  readonly variableSpeed = input<WrTypewriterVariableSpeed | undefined>(undefined);\n\n  /** Reverse the string (type it backwards). @default false */\n  readonly reverseMode = input(false, { transform: coerceBooleanProperty });\n\n  /** Start typing only after the host enters the viewport. @default false */\n  readonly startOnVisible = input(false, { transform: coerceBooleanProperty });\n\n  /** Emits with `(text, index)` when a string finishes typing. */\n  readonly sentenceComplete = output<{ text: string; index: number }>();\n\n  protected readonly displayed = signal('');\n  protected readonly cursorVisible = computed(() => {\n    if (!this.showCursor()) return false;\n    if (!this.hideCursorWhileTyping()) return true;\n    // While typing or deleting, cursor stays hidden.\n    return this.phase() === 'idle';\n  });\n  protected readonly activeColor = computed(() => {\n    const colours = this.textColors();\n    if (colours.length === 0) return 'inherit';\n    return colours[this.currentTextIndex() % colours.length];\n  });\n\n  /** Resolved list of strings (either `texts` or wrap `text` in an array). */\n  private readonly textArray = computed<readonly string[]>(() => {\n    const list = this.texts();\n    if (list && list.length > 0) return list;\n    const single = this.text();\n    return single ? [single] : [];\n  });\n\n  private readonly currentTextIndex = signal(0);\n  private readonly phase = signal<'idle' | 'typing' | 'deleting'>('idle');\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 timer: ReturnType<typeof setTimeout> | undefined;\n  private isVisible = false;\n\n  constructor() {\n    if (!this.isBrowser) return;\n    afterNextRender(() => this.boot());\n    this.destroyRef.onDestroy(() => clearTimeout(this.timer));\n  }\n\n  private boot(): void {\n    if (this.startOnVisible()) {\n      const io = new IntersectionObserver(\n        (entries, obs) => {\n          for (const e of entries) {\n            if (e.isIntersecting) {\n              obs.disconnect();\n              this.isVisible = true;\n              this.scheduleNext(this.initialDelay());\n              break;\n            }\n          }\n        },\n        { threshold: 0.1 }\n      );\n      io.observe(this.host.nativeElement);\n      this.destroyRef.onDestroy(() => io.disconnect());\n    } else {\n      this.isVisible = true;\n      this.scheduleNext(this.initialDelay());\n    }\n  }\n\n  private scheduleNext(delay: number): void {\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => this.tick(), delay);\n  }\n\n  private tick(): void {\n    if (!this.isVisible) return;\n    const arr = this.textArray();\n    if (arr.length === 0) return;\n\n    const idx = this.currentTextIndex();\n    const raw = arr[idx];\n    const target = this.reverseMode() ? raw.split('').reverse().join('') : raw;\n    const displayed = this.displayed();\n\n    // Reduced motion: show each sentence whole — no per-char typing or\n    // deleting. Multi-text setups still advance on the pause cadence,\n    // since the sentence swap itself is content, not decoration.\n    if (this.platform.prefersReducedMotion()) {\n      if (displayed !== target) {\n        this.displayed.set(target);\n        this.phase.set('idle');\n        this.sentenceComplete.emit({ text: raw, index: idx });\n      }\n      if (arr.length === 1 || (!this.loop() && idx === arr.length - 1)) return;\n      this.currentTextIndex.set((idx + 1) % arr.length);\n      this.scheduleNext(this.pauseDuration());\n      return;\n    }\n\n    if (this.phase() === 'deleting') {\n      if (displayed.length === 0) {\n        // Finished deleting → advance to next text.\n        this.phase.set('idle');\n        const nextIndex = (idx + 1) % arr.length;\n        // Non-loop: stop if we just finished the last sentence.\n        if (!this.loop() && idx === arr.length - 1) return;\n        this.currentTextIndex.set(nextIndex);\n        this.scheduleNext(this.pauseDuration());\n        return;\n      }\n      // Continue deleting.\n      this.displayed.set(displayed.slice(0, -1));\n      this.scheduleNext(this.deletingSpeed());\n      return;\n    }\n\n    // Typing or idle.\n    if (displayed.length < target.length) {\n      this.phase.set('typing');\n      this.displayed.set(target.slice(0, displayed.length + 1));\n      const delay = this.variableSpeed()\n        ? Math.random() * (this.variableSpeed()!.max - this.variableSpeed()!.min) + this.variableSpeed()!.min\n        : this.typingSpeed();\n      this.scheduleNext(delay);\n      return;\n    }\n\n    // Typing complete for this sentence.\n    this.sentenceComplete.emit({ text: raw, index: idx });\n\n    // Single text + no loop → stop here.\n    if (arr.length === 1 && !this.loop()) {\n      this.phase.set('idle');\n      return;\n    }\n    // Non-loop on last sentence → stop here.\n    if (!this.loop() && idx === arr.length - 1) {\n      this.phase.set('idle');\n      return;\n    }\n\n    // Start deleting after the pause.\n    this.phase.set('deleting');\n    this.scheduleNext(this.pauseDuration());\n  }\n}\n\nexport type { WrTypewriterVariableSpeed } from './interfaces';\n","<span class=\"wr-typewriter__content\">{{ displayed() }}</span>\n@if (cursorVisible()) {\n  <span class=\"wr-typewriter__cursor\" aria-hidden=\"true\">{{ cursorCharacter() }}</span>\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-typography.mjs

@@ -0,0 +1,79 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, computed, Directive } from '@angular/core';
+
+/**
+ * @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
+ */
+/**
+ * Semantic typography directive. Attaches to any native element and
+ * applies the visual treatment for the chosen `variant` (`h1`–`h6`,
+ * `display`, `lead`, `body`, `small`, `caption`, `overline`, `code`).
+ *
+ * Reads from the same `--wr-text-*` / `--wr-font-weight-*` / `--wr-leading-*`
+ * tokens used by the opt-in typography utility classes — themeable by
+ * overriding tokens at `:root`.
+ *
+ * @example
+ * ```html
+ * <h1 wrTypography variant="display">Build interfaces</h1>
+ * <h2 wrTypography variant="h2" tone="primary">that feel alive.</h2>
+ * <p wrTypography variant="lead">A developer-first library.</p>
+ * <span wrTypography variant="caption" tone="medium">v1.6.0 — released today</span>
+ * <code wrTypography variant="code">inject(WrTheme)</code>
+ * ```
+ *
+ * @see https://ngwr.dev/typography/overview
+ */
+class WrTypography {
+    /** Visual variant. @default 'body' */
+    variant = input('body', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Color tone. `null` (default) keeps the variant's own color — the base
+     * dark for headings/body, medium for lead/caption, primary for links.
+     */
+    tone = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Horizontal alignment. */
+    align = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** Truncate to single line with ellipsis. @default false */
+    truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Render with monospace font. @default false (auto-true for `code`) */
+    mono = input(false, { ...(ngDevMode ? { debugName: "mono" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    classes = computed(() => {
+        const parts = ['wr-typography', `wr-typography--${this.variant()}`];
+        const tone = this.tone();
+        if (tone)
+            parts.push(`wr-typography--tone-${tone}`);
+        const align = this.align();
+        if (align)
+            parts.push(`wr-typography--align-${align}`);
+        if (this.truncate())
+            parts.push('wr-typography--truncate');
+        if (this.mono() || this.variant() === 'code')
+            parts.push('wr-typography--mono');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTypography, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: WrTypography, isStandalone: true, selector: "[wrTypography]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrTypography, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wrTypography]',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrTypography };
+//# sourceMappingURL=ngwr-typography.mjs.map

package/fesm2022/ngwr-typography.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-typography.mjs","sources":["../../../projects/lib/typography/typography.ts","../../../projects/lib/typography/ngwr-typography.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 { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Directive, computed, input } from '@angular/core';\n\nimport type { WrTypographyAlign, WrTypographyTone, WrTypographyVariant } from './interfaces';\n\n/**\n * Semantic typography directive. Attaches to any native element and\n * applies the visual treatment for the chosen `variant` (`h1`–`h6`,\n * `display`, `lead`, `body`, `small`, `caption`, `overline`, `code`).\n *\n * Reads from the same `--wr-text-*` / `--wr-font-weight-*` / `--wr-leading-*`\n * tokens used by the opt-in typography utility classes — themeable by\n * overriding tokens at `:root`.\n *\n * @example\n * ```html\n * <h1 wrTypography variant=\"display\">Build interfaces</h1>\n * <h2 wrTypography variant=\"h2\" tone=\"primary\">that feel alive.</h2>\n * <p wrTypography variant=\"lead\">A developer-first library.</p>\n * <span wrTypography variant=\"caption\" tone=\"medium\">v1.6.0 — released today</span>\n * <code wrTypography variant=\"code\">inject(WrTheme)</code>\n * ```\n *\n * @see https://ngwr.dev/typography/overview\n */\n@Directive({\n  selector: '[wrTypography]',\n  host: { '[class]': 'classes()' },\n})\nexport class WrTypography {\n  /** Visual variant. @default 'body' */\n  readonly variant = input<WrTypographyVariant>('body');\n\n  /**\n   * Color tone. `null` (default) keeps the variant's own color — the base\n   * dark for headings/body, medium for lead/caption, primary for links.\n   */\n  readonly tone = input<WrTypographyTone | null>(null);\n\n  /** Horizontal alignment. */\n  readonly align = input<WrTypographyAlign | null>(null);\n\n  /** Truncate to single line with ellipsis. @default false */\n  readonly truncate = input(false, { transform: coerceBooleanProperty });\n\n  /** Render with monospace font. @default false (auto-true for `code`) */\n  readonly mono = input(false, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-typography', `wr-typography--${this.variant()}`];\n    const tone = this.tone();\n    if (tone) parts.push(`wr-typography--tone-${tone}`);\n    const align = this.align();\n    if (align) parts.push(`wr-typography--align-${align}`);\n    if (this.truncate()) parts.push('wr-typography--truncate');\n    if (this.mono() || this.variant() === 'code') parts.push('wr-typography--mono');\n    return parts.join(' ');\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;;;;;;;;;AAmBG;MAKU,YAAY,CAAA;;IAEd,OAAO,GAAG,KAAK,CAAsB,MAAM;gFAAC;AAErD;;;AAGG;IACM,IAAI,GAAG,KAAK,CAA0B,IAAI;6EAAC;;IAG3C,KAAK,GAAG,KAAK,CAA2B,IAAI;8EAAC;;IAG7C,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG7D,IAAI,GAAG,KAAK,CAAC,KAAK,4EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAE/C,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,eAAe,EAAE,CAAA,eAAA,EAAkB,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,CAAC;AACnE,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,QAAA,IAAI,IAAI;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,uBAAuB,IAAI,CAAA,CAAE,CAAC;AACnD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,IAAI,KAAK;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,wBAAwB,KAAK,CAAA,CAAE,CAAC;QACtD,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC;QAC1D,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,MAAM;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAC/E,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;uGA5BS,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAZ,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAZ,YAAY,EAAA,UAAA,EAAA,CAAA;kBAJxB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE;AACjC,iBAAA;;;ACnCD;;AAEG;;;;"}