ngwr 7.3.0 → 8.0.0

package/types/ngwr-statistic.d.ts

@@ -4,15 +4,22 @@ import * as _angular_core from '@angular/core';
  * KPI card — label + big number + optional prefix/suffix + delta. Pair
  * with a layout grid for dashboards.
  *
+ * When `value` is numeric the number counts up (eased) from its previous
+ * value to the new one on every change — see `animate`. String values and
+ * `prefers-reduced-motion` render instantly.
+ *
  * @example
  * ```html
  * <wr-statistic label="Active users" [value]="12345" suffix="users" />
  * <wr-statistic label="Revenue" [value]="9512" prefix="$" [delta]="12.4" />
+ * <wr-statistic label="Churn" [value]="1.8" suffix="%" [precision]="1" />
  * ```
  *
  * @see https://ngwr.dev/components/statistic
  */
 declare class WrStatistic {
+    private readonly platform;
+    private readonly locale;
     readonly label: _angular_core.InputSignal<string>;
     /** The number (or string) to display in the main slot. */
     readonly value: _angular_core.InputSignal<string | number | null>;
@@ -20,6 +27,33 @@ declare class WrStatistic {
     readonly prefix: _angular_core.InputSignal<string>;
     /** Suffix glyph / unit (e.g. `'%'`, `'kg'`). */
     readonly suffix: _angular_core.InputSignal<string>;
+    /** Fixed number of decimals applied to numeric values. @default 0 */
+    readonly precision: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Count up to a new numeric `value` instead of swapping instantly. Always
+     * off for string values or under `prefers-reduced-motion`. @default true
+     */
+    readonly animate: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Count-up duration (ms). @default 700 */
+    readonly duration: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * The current value coerced to a finite number, or `null` when `value` is
+     * a non-numeric string / empty / nullish (rendered as-is).
+     */
+    protected readonly numericValue: _angular_core.Signal<number | null>;
+    /** Whether the value should count up (browser, numeric, opted-in, motion allowed). */
+    protected readonly animated: _angular_core.Signal<boolean>;
+    /** Animation start — the previously-rendered numeric value (0 on first paint). */
+    protected readonly animateFrom: _angular_core.WritableSignal<number>;
+    /** Bookkeeping: the last numeric value seen, fed back as the next `from`. */
+    private readonly lastNumeric;
+    constructor();
+    /**
+     * Static (non-animated) display string. Numeric values honour `precision`
+     * and locale grouping so they match the count-up output; everything else
+     * renders verbatim with an em-dash fallback.
+     */
+    protected readonly displayValue: _angular_core.Signal<string>;
     /**
      * Optional delta vs previous period — shown as `+x.x%` (or `-x.x%`).
      * Use `deltaSuffix` to change the trailing unit.
@@ -31,7 +65,7 @@ declare class WrStatistic {
     protected readonly deltaDirection: _angular_core.Signal<"up" | "down" | "flat">;
     protected readonly deltaText: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrStatistic, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStatistic, "wr-statistic", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaSuffix": { "alias": "deltaSuffix"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrStatistic, "wr-statistic", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "precision": { "alias": "precision"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaSuffix": { "alias": "deltaSuffix"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**

package/types/ngwr-switch.d.ts

@@ -11,6 +11,7 @@ import { ControlValueAccessor } from '@angular/forms';
  *
  * @see https://ngwr.dev/components/switch
  */
+type WrSwitchSize = 'sm' | 'md' | 'lg';
 declare class WrSwitch implements ControlValueAccessor {
     /** Stable id used to associate the native input with its label. */
     readonly id: _angular_core.InputSignal<string>;
@@ -20,6 +21,8 @@ declare class WrSwitch implements ControlValueAccessor {
      * @default false
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrSwitchSize>;
     protected readonly checked: _angular_core.WritableSignal<boolean>;
     private readonly disabledFromCva;
     protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
@@ -33,7 +36,8 @@ declare class WrSwitch implements ControlValueAccessor {
     protected onInputChange(event: Event): void;
     protected onInputBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSwitch, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSwitch, "wr-switch", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSwitch, "wr-switch", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { WrSwitch };
+export type { WrSwitchSize };

package/types/ngwr-textarea.d.ts

@@ -16,13 +16,19 @@ import { ControlValueAccessor } from '@angular/forms';
  *
  * @see https://ngwr.dev/components/textarea
  */
+type WrTextareaSize = 'sm' | 'md' | 'lg';
+type WrTextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare class WrTextarea implements ControlValueAccessor {
     /** Native placeholder text. @default '' */
     readonly placeholder: _angular_core.InputSignal<string>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrTextareaSize>;
     /** Visible row count. @default 3 */
     readonly rows: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** Allow user resize via the native handle. @default true */
+    /** Allow user resize via the corner grip. @default true */
     readonly resizable: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Resize direction of the corner grip (the grip icon adapts). @default 'vertical' */
+    readonly resize: _angular_core.InputSignal<WrTextareaResize>;
     /** Read-only state. @default false */
     readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Grow the textarea to fit its content. @default false */
@@ -40,11 +46,23 @@ declare class WrTextarea implements ControlValueAccessor {
     protected readonly focused: _angular_core.WritableSignal<boolean>;
     protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
     protected readonly native: _angular_core.Signal<ElementRef<HTMLTextAreaElement>>;
+    /** Resize direction, gated by `resizable` (false → 'none'). */
+    protected readonly effectiveResize: _angular_core.Signal<WrTextareaResize>;
     protected readonly classes: _angular_core.Signal<string>;
+    /** Show the corner grip (hidden when direction is 'none' / autosize / disabled). */
+    protected readonly showHandle: _angular_core.Signal<boolean>;
     private readonly platformId;
     private readonly isBrowser;
+    private readonly hostEl;
     private onChange;
     private onTouched;
+    private resizing;
+    private resizeStartY;
+    private resizeStartX;
+    private resizeStartHeight;
+    private resizeStartWidth;
+    private resizeMinHeight;
+    private resizeMaxWidth;
     constructor();
     writeValue(value: string | null): void;
     registerOnChange(fn: (value: string) => void): void;
@@ -52,9 +70,13 @@ declare class WrTextarea implements ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     protected onInput(event: Event): void;
     protected onBlur(): void;
-    private resize;
+    protected startResize(event: PointerEvent): void;
+    protected onResize(event: PointerEvent): void;
+    protected endResize(event: PointerEvent): void;
+    private autofit;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTextarea, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTextarea, "wr-textarea", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "autosize": { "alias": "autosize"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTextarea, "wr-textarea", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "autosize": { "alias": "autosize"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrTextarea };
+export type { WrTextareaResize, WrTextareaSize };

package/types/ngwr-toast.d.ts

@@ -147,7 +147,11 @@ declare class WrToast {
     private currentPosition;
     private currentMode;
     private nextId;
+    /** Currently rendered toasts (capped at `config.maxStack`). */
     private active;
+    /** Overflow waiting for a free slot — promoted FIFO as actives dismiss, so
+     * nothing is ever silently dropped. */
+    private queue;
     /** Open a toast. Returns a handle you can `dismiss()` early. */
     show(options: WrToastOptions): WrToastRef;
     /** Dismiss a single toast by id. */
@@ -161,7 +165,9 @@ declare class WrToast {
     private startTimer;
     private pauseTimer;
     private ensureHost;
-    private enforceMaxStack;
+    /** Fill any free stack slots from the queue (FIFO), starting each promoted
+     * toast's auto-dismiss timer only as it becomes visible. */
+    private promoteFromQueue;
     private pushToHost;
     private disposeHost;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrToast, never>;

package/types/ngwr-validators.d.ts

@@ -39,10 +39,12 @@ declare const WrValidators: {
     hexColor: (control: AbstractControl) => ValidationErrors | null;
     /**
      * Valid URL. Accepts any scheme by default; pass `{ protocols: ['https'] }`
-     * to restrict.
+     * to restrict. A scheme is required by default; pass `{ requireProtocol: false }`
+     * to also accept bare domains (e.g. `ngwr.dev`), assuming `https`.
      */
     url: (options?: {
         readonly protocols?: readonly string[];
+        readonly requireProtocol?: boolean;
     }) => ValidatorFn;
     /** Credit card number — Luhn check + 13-19 digit length. Spaces and dashes are stripped first. */
     cardNumber: (control: AbstractControl) => ValidationErrors | null;

package/types/ngwr-version.d.ts

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'21.2.13'`), not ngwr's.
  */
-declare const NGWR_VERSION = "7.3.0";
+declare const NGWR_VERSION = "8.0.0";
 
 /**
  * @license

package/window/styles/_index.scss

@@ -3,12 +3,12 @@
 .wr-window {
   --wr-window-bg: var(--wr-color-white);
   --wr-window-border: var(--wr-color-light);
-  --wr-window-chrome-bg: rgba(var(--wr-color-light-rgb), 0.4);
+  --wr-window-chrome-bg: var(--wr-color-hover);
   --wr-window-chrome-color: var(--wr-color-dark);
   --wr-window-radius: var(--wr-border-radius-base);
   --wr-window-handle-size: 8px;
   --wr-window-chrome-height: 2.25rem;
-  --wr-window-title-size: 0.8125rem;
+  --wr-window-title-size: var(--wr-text-sm);
   --wr-window-action-size: 1.5rem;
   --wr-window-anim-duration: 0.18s;
 
@@ -45,7 +45,7 @@
   // pixel of vertical space matters.
   &--chrome-compact {
     --wr-window-chrome-height: 1.625rem;
-    --wr-window-title-size: 0.75rem;
+    --wr-window-title-size: var(--wr-text-xs);
     --wr-window-action-size: 1.125rem;
   }
 
@@ -94,7 +94,7 @@
     align-items: center;
     gap: 0.375rem;
     padding-right: 0.375rem;
-    font-size: 0.75rem;
+    font-size: var(--wr-text-xs);
 
     &:empty {
       display: none;
@@ -157,7 +157,7 @@
       width: 0.875rem; // 14px — bigger than the prior 12px to match native
       height: 0.875rem;
       border-radius: 50%;
-      color: rgba(0, 0, 0, 0.55); // glyph color (revealed on hover)
+      color: rgba(var(--wr-color-black-rgb), 0.55); // glyph color (revealed on hover)
 
       &--close,
       &--close:hover {
@@ -223,7 +223,7 @@
     padding: 0.25rem 0.75rem;
     border-top: 1px solid var(--wr-window-border);
     background: rgba(var(--wr-color-light-rgb), 0.25);
-    font-size: 0.75rem;
+    font-size: var(--wr-text-xs);
     color: var(--wr-color-medium);
 
     &:empty {
@@ -374,7 +374,7 @@
     border-radius: var(--wr-border-radius-sm);
     color: var(--wr-color-dark);
     font-family: inherit;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25rem;
     cursor: pointer;
     max-width: 12rem;
@@ -387,7 +387,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--wr-color-primary);
+      @include theme.focus-ring;
       outline-offset: 2px;
     }
   }

package/fesm2022/ngwr-scramble-text.mjs

@@ -1,165 +0,0 @@
-import { isPlatformBrowser } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, 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 ScrambledText effect by David Haz / reactbits.dev.
- * Original: https://www.reactbits.dev/text-animations/scrambled-text
- *
- * The reactbits version uses GSAP's paid SplitText + ScrambleTextPlugin.
- * This port is dependency-free — splits via vanilla DOM, scrambles via a
- * per-char `setInterval` loop, restores on settle.
- */
-function pickRandom(pool, exclude) {
-    if (pool.length === 0)
-        return exclude;
-    if (pool.length === 1)
-        return pool;
-    // Avoid landing on the original mid-scramble — looks like nothing happened.
-    let pick = pool.charAt(Math.floor(Math.random() * pool.length));
-    for (let tries = 0; tries < 3 && pick === exclude; tries++) {
-        pick = pool.charAt(Math.floor(Math.random() * pool.length));
-    }
-    return pick;
-}
-/**
- * Cursor-proximity scrambler. Each character inside the projected text
- * scrambles through `scrambleChars` whenever the pointer moves within
- * `radius` px of it, then settles back to the original. Closer pointer →
- * longer scramble.
- *
- * @example
- * ```html
- * <wr-scramble-text
- *   [radius]="120"
- *   [duration]="1.4"
- *   scrambleChars="!&%*"
- * >
- *   Hover this paragraph to scramble characters near the cursor.
- * </wr-scramble-text>
- * ```
- *
- * @see https://www.reactbits.dev/text-animations/scrambled-text
- */
-class WrScrambleText {
-    /** Proximity radius in pixels. @default 100 */
-    radius = input(100, { ...(ngDevMode ? { debugName: "radius" } : /* istanbul ignore next */ {}), transform: numAttr(100) });
-    /** Max scramble duration in seconds (scaled by proximity — closer = longer). @default 1.2 */
-    duration = input(1.2, { ...(ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {}), transform: numAttr(1.2) });
-    /** Approximate seconds between random-char swaps. Lower = faster scramble. @default 0.05 */
-    speed = input(0.05, { ...(ngDevMode ? { debugName: "speed" } : /* istanbul ignore next */ {}), transform: numAttr(0.05) });
-    /** Pool of glyphs to scramble through. @default '.:' */
-    scrambleChars = input('.:', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scrambleChars" }] : /* istanbul ignore next */ []));
-    host = inject(ElementRef);
-    destroyRef = inject(DestroyRef);
-    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
-    platform = inject(WrPlatform);
-    /** One entry per active scramble, keyed by char span. */
-    active = new Map();
-    /** Cached list of char spans. Re-computed after each render. */
-    chars = [];
-    constructor() {
-        if (!this.isBrowser)
-            return;
-        afterNextRender(() => this.split());
-        this.destroyRef.onDestroy(() => this.clearAll());
-    }
-    onPointerMove(event) {
-        if (this.chars.length === 0)
-            return;
-        // Reduced motion: pointer proximity stops scrambling — text stays put.
-        if (this.platform.prefersReducedMotion())
-            return;
-        const radius = this.radius();
-        const duration = this.duration() * 1000;
-        const swapInterval = Math.max(16, this.speed() * 1000);
-        const pool = this.scrambleChars();
-        for (const charEl of this.chars) {
-            const rect = charEl.getBoundingClientRect();
-            const dx = event.clientX - (rect.left + rect.width / 2);
-            const dy = event.clientY - (rect.top + rect.height / 2);
-            const dist = Math.hypot(dx, dy);
-            if (dist > radius)
-                continue;
-            // Cancel any in-flight scramble for this char — we're restarting.
-            this.cancelOne(charEl);
-            // Proximity factor: 0 at the edge, 1 at the centre.
-            const proximity = 1 - dist / radius;
-            const scrambleMs = duration * proximity;
-            const original = charEl.dataset['scrambleOriginal'] ?? '';
-            const swapId = setInterval(() => {
-                charEl.textContent = pickRandom(pool, original);
-            }, swapInterval);
-            const settleId = setTimeout(() => {
-                clearInterval(swapId);
-                charEl.textContent = original;
-                this.active.delete(charEl);
-            }, scrambleMs);
-            this.active.set(charEl, { swapId, settleId });
-        }
-    }
-    /** Walk the projected text and wrap each non-whitespace character in a span. */
-    split() {
-        const inner = this.host.nativeElement.querySelector('.wr-scramble-text__inner');
-        if (!inner)
-            return;
-        const raw = inner.textContent ?? '';
-        if (!raw)
-            return;
-        const frag = document.createDocumentFragment();
-        for (const ch of [...raw]) {
-            if (/\s/.test(ch)) {
-                frag.appendChild(document.createTextNode(ch));
-            }
-            else {
-                const span = document.createElement('span');
-                span.className = 'wr-scramble-text__char';
-                span.textContent = ch;
-                span.dataset['scrambleOriginal'] = ch;
-                frag.appendChild(span);
-            }
-        }
-        inner.replaceChildren(frag);
-        this.chars = Array.from(inner.querySelectorAll('.wr-scramble-text__char'));
-    }
-    cancelOne(el) {
-        const entry = this.active.get(el);
-        if (!entry)
-            return;
-        clearInterval(entry.swapId);
-        clearTimeout(entry.settleId);
-        this.active.delete(el);
-    }
-    clearAll() {
-        for (const [el, entry] of this.active) {
-            clearInterval(entry.swapId);
-            clearTimeout(entry.settleId);
-            el.textContent = el.dataset['scrambleOriginal'] ?? '';
-        }
-        this.active.clear();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrScrambleText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrScrambleText, isStandalone: true, selector: "wr-scramble-text", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, scrambleChars: { classPropertyName: "scrambleChars", publicName: "scrambleChars", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointermove": "onPointerMove($event)" }, classAttribute: "wr-scramble-text" }, ngImport: i0, template: '<span class="wr-scramble-text__inner" #inner><ng-content /></span>', isInline: true, styles: [".wr-scramble-text{display:block}.wr-scramble-text__char{display:inline-block;will-change:contents}\n"], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrScrambleText, decorators: [{
-            type: Component,
-            args: [{ selector: 'wr-scramble-text', template: '<span class="wr-scramble-text__inner" #inner><ng-content /></span>', encapsulation: ViewEncapsulation.None, host: {
-                        class: 'wr-scramble-text',
-                        '(pointermove)': 'onPointerMove($event)',
-                    }, styles: [".wr-scramble-text{display:block}.wr-scramble-text__char{display:inline-block;will-change:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], scrambleChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrambleChars", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { WrScrambleText };
-//# sourceMappingURL=ngwr-scramble-text.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ngwr-scramble-text.mjs","sources":["../../../projects/lib/scramble-text/scramble-text.ts","../../../projects/lib/scramble-text/ngwr-scramble-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 ScrambledText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/scrambled-text\n *\n * The reactbits version uses GSAP's paid SplitText + ScrambleTextPlugin.\n * This port is dependency-free — splits via vanilla DOM, scrambles via a\n * per-char `setInterval` loop, restores on settle.\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  inject,\n  input,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\ninterface ActiveScramble {\n  swapId: ReturnType<typeof setInterval>;\n  settleId: ReturnType<typeof setTimeout>;\n}\n\nfunction pickRandom(pool: string, exclude: string): string {\n  if (pool.length === 0) return exclude;\n  if (pool.length === 1) return pool;\n  // Avoid landing on the original mid-scramble — looks like nothing happened.\n  let pick = pool.charAt(Math.floor(Math.random() * pool.length));\n  for (let tries = 0; tries < 3 && pick === exclude; tries++) {\n    pick = pool.charAt(Math.floor(Math.random() * pool.length));\n  }\n  return pick;\n}\n\n/**\n * Cursor-proximity scrambler. Each character inside the projected text\n * scrambles through `scrambleChars` whenever the pointer moves within\n * `radius` px of it, then settles back to the original. Closer pointer →\n * longer scramble.\n *\n * @example\n * ```html\n * <wr-scramble-text\n *   [radius]=\"120\"\n *   [duration]=\"1.4\"\n *   scrambleChars=\"!&%*\"\n * >\n *   Hover this paragraph to scramble characters near the cursor.\n * </wr-scramble-text>\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/scrambled-text\n */\n@Component({\n  selector: 'wr-scramble-text',\n  template: '<span class=\"wr-scramble-text__inner\" #inner><ng-content /></span>',\n  styleUrl: './scramble-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-scramble-text',\n    '(pointermove)': 'onPointerMove($event)',\n  },\n})\nexport class WrScrambleText {\n  /** Proximity radius in pixels. @default 100 */\n  readonly radius = input(100, { transform: numAttr(100) });\n\n  /** Max scramble duration in seconds (scaled by proximity — closer = longer). @default 1.2 */\n  readonly duration = input(1.2, { transform: numAttr(1.2) });\n\n  /** Approximate seconds between random-char swaps. Lower = faster scramble. @default 0.05 */\n  readonly speed = input(0.05, { transform: numAttr(0.05) });\n\n  /** Pool of glyphs to scramble through. @default '.:' */\n  readonly scrambleChars = input('.:');\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  /** One entry per active scramble, keyed by char span. */\n  private readonly active = new Map<HTMLElement, ActiveScramble>();\n\n  /** Cached list of char spans. Re-computed after each render. */\n  private chars: readonly HTMLElement[] = [];\n\n  constructor() {\n    if (!this.isBrowser) return;\n    afterNextRender(() => this.split());\n    this.destroyRef.onDestroy(() => this.clearAll());\n  }\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (this.chars.length === 0) return;\n    // Reduced motion: pointer proximity stops scrambling — text stays put.\n    if (this.platform.prefersReducedMotion()) return;\n    const radius = this.radius();\n    const duration = this.duration() * 1000;\n    const swapInterval = Math.max(16, this.speed() * 1000);\n    const pool = this.scrambleChars();\n\n    for (const charEl of this.chars) {\n      const rect = charEl.getBoundingClientRect();\n      const dx = event.clientX - (rect.left + rect.width / 2);\n      const dy = event.clientY - (rect.top + rect.height / 2);\n      const dist = Math.hypot(dx, dy);\n      if (dist > radius) continue;\n\n      // Cancel any in-flight scramble for this char — we're restarting.\n      this.cancelOne(charEl);\n\n      // Proximity factor: 0 at the edge, 1 at the centre.\n      const proximity = 1 - dist / radius;\n      const scrambleMs = duration * proximity;\n      const original = charEl.dataset['scrambleOriginal'] ?? '';\n\n      const swapId = setInterval(() => {\n        charEl.textContent = pickRandom(pool, original);\n      }, swapInterval);\n\n      const settleId = setTimeout(() => {\n        clearInterval(swapId);\n        charEl.textContent = original;\n        this.active.delete(charEl);\n      }, scrambleMs);\n\n      this.active.set(charEl, { swapId, settleId });\n    }\n  }\n\n  /** Walk the projected text and wrap each non-whitespace character in a span. */\n  private split(): void {\n    const inner = this.host.nativeElement.querySelector<HTMLElement>('.wr-scramble-text__inner');\n    if (!inner) return;\n    const raw = inner.textContent ?? '';\n    if (!raw) return;\n\n    const frag = document.createDocumentFragment();\n    for (const ch of [...raw]) {\n      if (/\\s/.test(ch)) {\n        frag.appendChild(document.createTextNode(ch));\n      } else {\n        const span = document.createElement('span');\n        span.className = 'wr-scramble-text__char';\n        span.textContent = ch;\n        span.dataset['scrambleOriginal'] = ch;\n        frag.appendChild(span);\n      }\n    }\n    inner.replaceChildren(frag);\n    this.chars = Array.from(inner.querySelectorAll<HTMLElement>('.wr-scramble-text__char'));\n  }\n\n  private cancelOne(el: HTMLElement): void {\n    const entry = this.active.get(el);\n    if (!entry) return;\n    clearInterval(entry.swapId);\n    clearTimeout(entry.settleId);\n    this.active.delete(el);\n  }\n\n  private clearAll(): void {\n    for (const [el, entry] of this.active) {\n      clearInterval(entry.swapId);\n      clearTimeout(entry.settleId);\n      el.textContent = el.dataset['scrambleOriginal'] ?? '';\n    }\n    this.active.clear();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/scramble-text/scramble-text.scss

@@ -1 +0,0 @@
-@forward './styles';

package/scramble-text/styles/_index.scss

@@ -1,8 +0,0 @@
-.wr-scramble-text {
-  display: block;
-
-  &__char {
-    display: inline-block;
-    will-change: contents;
-  }
-}

package/types/ngwr-scramble-text.d.ts

@@ -1,49 +0,0 @@
-import * as _angular_core from '@angular/core';
-
-/**
- * Cursor-proximity scrambler. Each character inside the projected text
- * scrambles through `scrambleChars` whenever the pointer moves within
- * `radius` px of it, then settles back to the original. Closer pointer →
- * longer scramble.
- *
- * @example
- * ```html
- * <wr-scramble-text
- *   [radius]="120"
- *   [duration]="1.4"
- *   scrambleChars="!&%*"
- * >
- *   Hover this paragraph to scramble characters near the cursor.
- * </wr-scramble-text>
- * ```
- *
- * @see https://www.reactbits.dev/text-animations/scrambled-text
- */
-declare class WrScrambleText {
-    /** Proximity radius in pixels. @default 100 */
-    readonly radius: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** Max scramble duration in seconds (scaled by proximity — closer = longer). @default 1.2 */
-    readonly duration: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** Approximate seconds between random-char swaps. Lower = faster scramble. @default 0.05 */
-    readonly speed: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** Pool of glyphs to scramble through. @default '.:' */
-    readonly scrambleChars: _angular_core.InputSignal<string>;
-    private readonly host;
-    private readonly destroyRef;
-    private readonly isBrowser;
-    private readonly platform;
-    /** One entry per active scramble, keyed by char span. */
-    private readonly active;
-    /** Cached list of char spans. Re-computed after each render. */
-    private chars;
-    constructor();
-    protected onPointerMove(event: PointerEvent): void;
-    /** Walk the projected text and wrap each non-whitespace character in a span. */
-    private split;
-    private cancelOne;
-    private clearAll;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrScrambleText, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrScrambleText, "wr-scramble-text", never, { "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "scrambleChars": { "alias": "scrambleChars"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-export { WrScrambleText };