ngwr 6.1.1 → 7.1.0

package/fesm2022/ngwr-fuzzy-text.mjs

@@ -0,0 +1,373 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, viewChild, inject, DestroyRef, PLATFORM_ID, afterNextRender, effect, 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 FuzzyText effect by David Haz / reactbits.dev.
+ * Original: https://www.reactbits.dev/text-animations/fuzzy-text
+ *
+ * Renders text to an offscreen 2D canvas, then redraws it onto the
+ * visible canvas one row (or column) at a time with random horizontal /
+ * vertical offsets. Intensity reacts to hover / click / glitch state.
+ */
+/**
+ * Canvas-rendered "fuzzy" text — each row/column of glyphs is offset by
+ * a random amount per frame, giving the text a TV-static or motion-blur
+ * appearance. Intensity ramps up on hover, click, and during periodic
+ * glitch bursts (configurable).
+ *
+ * @example
+ * ```html
+ * <wr-fuzzy-text text="404" />
+ * <wr-fuzzy-text
+ *   text="HELLO"
+ *   color="#0ea5e9"
+ *   [fuzzRange]="50"
+ *   [hoverIntensity]="0.8"
+ *   [glitchMode]="true"
+ * />
+ * ```
+ *
+ * @see https://www.reactbits.dev/text-animations/fuzzy-text
+ */
+class WrFuzzyText {
+    /** Text to render. */
+    text = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Font size as CSS length (`'4rem'`, `'72px'`, …) or px number. @default 'clamp(2rem, 10vw, 10rem)' */
+    fontSize = input('clamp(2rem, 10vw, 10rem)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
+    /** Font weight. @default 900 */
+    fontWeight = input(900, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fontWeight" }] : /* istanbul ignore next */ []));
+    /** Font family. `'inherit'` reads the canvas's computed style. @default 'inherit' */
+    fontFamily = input('inherit', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fontFamily" }] : /* istanbul ignore next */ []));
+    /** Text colour. Ignored if `[gradient]` is set. @default '#fff' */
+    color = input('#fff', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Optional horizontal gradient stops. */
+    gradient = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
+    /** Enable hover / touch reactivity. @default true */
+    enableHover = input(true, { ...(ngDevMode ? { debugName: "enableHover" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Base intensity (0..1) when idle. @default 0.18 */
+    baseIntensity = input(0.18, { ...(ngDevMode ? { debugName: "baseIntensity" } : /* istanbul ignore next */ {}), transform: numAttr(0.18) });
+    /** Intensity (0..1) while the pointer hovers the text. @default 0.5 */
+    hoverIntensity = input(0.5, { ...(ngDevMode ? { debugName: "hoverIntensity" } : /* istanbul ignore next */ {}), transform: numAttr(0.5) });
+    /** Max pixel displacement per row/column at intensity 1. @default 30 */
+    fuzzRange = input(30, { ...(ngDevMode ? { debugName: "fuzzRange" } : /* istanbul ignore next */ {}), transform: numAttr(30) });
+    /** Frame rate cap. @default 60 */
+    fps = input(60, { ...(ngDevMode ? { debugName: "fps" } : /* istanbul ignore next */ {}), transform: numAttr(60) });
+    /** Fuzz direction. @default 'horizontal' */
+    direction = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Ms to ease intensity toward target. `0` snaps. @default 0 */
+    transitionDuration = input(0, { ...(ngDevMode ? { debugName: "transitionDuration" } : /* istanbul ignore next */ {}), transform: numAttr(0) });
+    /** Spike to full intensity briefly on click. @default false */
+    clickEffect = input(false, { ...(ngDevMode ? { debugName: "clickEffect" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Periodic "glitch" bursts at full intensity. @default false */
+    glitchMode = input(false, { ...(ngDevMode ? { debugName: "glitchMode" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Ms between glitch bursts. @default 2000 */
+    glitchInterval = input(2000, { ...(ngDevMode ? { debugName: "glitchInterval" } : /* istanbul ignore next */ {}), transform: numAttr(2000) });
+    /** Ms a glitch burst lasts. @default 200 */
+    glitchDuration = input(200, { ...(ngDevMode ? { debugName: "glitchDuration" } : /* istanbul ignore next */ {}), transform: numAttr(200) });
+    /** Extra pixels between glyphs. @default 0 */
+    letterSpacing = input(0, { ...(ngDevMode ? { debugName: "letterSpacing" } : /* istanbul ignore next */ {}), transform: numAttr(0) });
+    canvasRef = viewChild.required('canvas');
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    platform = inject(WrPlatform);
+    teardown;
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => {
+            void this.init();
+        });
+        // Re-init whenever any input that affects the offscreen rendering changes.
+        effect(() => {
+            this.text();
+            this.fontSize();
+            this.fontWeight();
+            this.fontFamily();
+            this.color();
+            this.gradient();
+            this.letterSpacing();
+            this.direction();
+            this.fuzzRange();
+            this.fps();
+            this.glitchMode();
+            this.glitchInterval();
+            this.glitchDuration();
+            // Skip if we haven't booted yet.
+            if (!this.teardown)
+                return;
+            this.teardown();
+            this.teardown = undefined;
+            queueMicrotask(() => {
+                void this.init();
+            });
+        });
+        this.destroyRef.onDestroy(() => this.teardown?.());
+    }
+    // Init / loop
+    async init() {
+        const canvas = this.canvasRef().nativeElement;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const fontFamily = this.fontFamily() === 'inherit' ? window.getComputedStyle(canvas).fontFamily || 'sans-serif' : this.fontFamily();
+        const fontSize = this.fontSize();
+        const fontSizeStr = typeof fontSize === 'number' ? `${fontSize}px` : fontSize;
+        const fontWeight = this.fontWeight();
+        const fontString = `${fontWeight} ${fontSizeStr} ${fontFamily}`;
+        try {
+            await document.fonts.load(fontString);
+        }
+        catch {
+            await document.fonts.ready;
+        }
+        // Numeric font size for buffer maths.
+        let numericFontSize;
+        if (typeof fontSize === 'number') {
+            numericFontSize = fontSize;
+        }
+        else {
+            const tmp = document.createElement('span');
+            tmp.style.fontSize = fontSize;
+            document.body.appendChild(tmp);
+            numericFontSize = Number.parseFloat(window.getComputedStyle(tmp).fontSize);
+            document.body.removeChild(tmp);
+        }
+        const text = this.text();
+        const letterSpacing = this.letterSpacing();
+        const fuzzRange = this.fuzzRange();
+        const direction = this.direction();
+        // Offscreen canvas with the laid-out text.
+        const offscreen = document.createElement('canvas');
+        const offCtx = offscreen.getContext('2d');
+        if (!offCtx)
+            return;
+        offCtx.font = fontString;
+        offCtx.textBaseline = 'alphabetic';
+        let totalWidth = 0;
+        if (letterSpacing !== 0) {
+            for (const ch of text)
+                totalWidth += offCtx.measureText(ch).width + letterSpacing;
+            totalWidth -= letterSpacing;
+        }
+        else {
+            totalWidth = offCtx.measureText(text).width;
+        }
+        const m = offCtx.measureText(text);
+        const actualLeft = m.actualBoundingBoxLeft ?? 0;
+        const actualRight = letterSpacing !== 0 ? totalWidth : (m.actualBoundingBoxRight ?? m.width);
+        const actualAscent = m.actualBoundingBoxAscent ?? numericFontSize;
+        const actualDescent = m.actualBoundingBoxDescent ?? numericFontSize * 0.2;
+        const textBoundingWidth = Math.ceil(letterSpacing !== 0 ? totalWidth : actualLeft + actualRight);
+        const tightHeight = Math.ceil(actualAscent + actualDescent);
+        const extraWidthBuffer = 10;
+        const offscreenWidth = textBoundingWidth + extraWidthBuffer;
+        offscreen.width = offscreenWidth;
+        offscreen.height = tightHeight;
+        const xOffset = extraWidthBuffer / 2;
+        offCtx.font = fontString;
+        offCtx.textBaseline = 'alphabetic';
+        const gradient = this.gradient();
+        if (gradient && gradient.length >= 2) {
+            const g = offCtx.createLinearGradient(0, 0, offscreenWidth, 0);
+            gradient.forEach((c, i) => g.addColorStop(i / (gradient.length - 1), c));
+            offCtx.fillStyle = g;
+        }
+        else {
+            offCtx.fillStyle = this.color();
+        }
+        if (letterSpacing !== 0) {
+            let xPos = xOffset;
+            for (const ch of text) {
+                offCtx.fillText(ch, xPos, actualAscent);
+                xPos += offCtx.measureText(ch).width + letterSpacing;
+            }
+        }
+        else {
+            offCtx.fillText(text, xOffset - actualLeft, actualAscent);
+        }
+        // Size the visible canvas, leaving room for the max horizontal fuzz.
+        const horizontalMargin = fuzzRange + 20;
+        const verticalMargin = 0;
+        canvas.width = offscreenWidth + horizontalMargin * 2;
+        canvas.height = tightHeight + verticalMargin * 2;
+        ctx.translate(horizontalMargin, verticalMargin);
+        const interactiveLeft = horizontalMargin + xOffset;
+        const interactiveTop = verticalMargin;
+        const interactiveRight = interactiveLeft + textBoundingWidth;
+        const interactiveBottom = interactiveTop + tightHeight;
+        // Reduced motion: paint the text once, clean — no fuzz loop, no
+        // glitch bursts, no pointer reactivity. Teardown must still be set
+        // so the re-init effect keeps redrawing on input changes.
+        if (this.platform.prefersReducedMotion()) {
+            ctx.drawImage(offscreen, 0, 0);
+            this.teardown = () => undefined;
+            return;
+        }
+        let isHovering = false;
+        let isClicking = false;
+        let isGlitching = false;
+        let currentIntensity = this.baseIntensity();
+        let targetIntensity = currentIntensity;
+        let lastFrame = 0;
+        const frameDuration = 1000 / this.fps();
+        let rafId = 0;
+        let glitchOnTimer;
+        let glitchOffTimer;
+        let clickTimer;
+        const startGlitchLoop = () => {
+            if (!this.glitchMode())
+                return;
+            glitchOnTimer = setTimeout(() => {
+                isGlitching = true;
+                glitchOffTimer = setTimeout(() => {
+                    isGlitching = false;
+                    startGlitchLoop();
+                }, this.glitchDuration());
+            }, this.glitchInterval());
+        };
+        if (this.glitchMode())
+            startGlitchLoop();
+        const run = (ts) => {
+            if (ts - lastFrame < frameDuration) {
+                rafId = requestAnimationFrame(run);
+                return;
+            }
+            lastFrame = ts;
+            ctx.clearRect(-fuzzRange - 20, -fuzzRange - 10, offscreenWidth + 2 * (fuzzRange + 20), tightHeight + 2 * (fuzzRange + 10));
+            if (isClicking)
+                targetIntensity = 1;
+            else if (isGlitching)
+                targetIntensity = 1;
+            else if (isHovering)
+                targetIntensity = this.hoverIntensity();
+            else
+                targetIntensity = this.baseIntensity();
+            const td = this.transitionDuration();
+            if (td > 0) {
+                const step = 1 / (td / frameDuration);
+                if (currentIntensity < targetIntensity)
+                    currentIntensity = Math.min(currentIntensity + step, targetIntensity);
+                else if (currentIntensity > targetIntensity)
+                    currentIntensity = Math.max(currentIntensity - step, targetIntensity);
+            }
+            else {
+                currentIntensity = targetIntensity;
+            }
+            if (direction === 'horizontal') {
+                for (let j = 0; j < tightHeight; j++) {
+                    const dx = Math.floor(currentIntensity * (Math.random() - 0.5) * fuzzRange);
+                    ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1);
+                }
+            }
+            else if (direction === 'vertical') {
+                for (let i = 0; i < offscreenWidth; i++) {
+                    const dy = Math.floor(currentIntensity * (Math.random() - 0.5) * fuzzRange);
+                    ctx.drawImage(offscreen, i, 0, 1, tightHeight, i, dy, 1, tightHeight);
+                }
+            }
+            else {
+                // both: horizontal pass then vertical pass on the result
+                for (let j = 0; j < tightHeight; j++) {
+                    const dx = Math.floor(currentIntensity * (Math.random() - 0.5) * fuzzRange);
+                    ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1);
+                }
+                const w = offscreenWidth + fuzzRange;
+                const h = tightHeight + fuzzRange;
+                const data = ctx.getImageData(0, 0, w, h);
+                ctx.clearRect(-fuzzRange - 20, -fuzzRange - 10, offscreenWidth + 2 * (fuzzRange + 20), tightHeight + 2 * (fuzzRange + 10));
+                ctx.putImageData(data, 0, 0);
+                for (let i = 0; i < w; i++) {
+                    const dy = Math.floor(currentIntensity * (Math.random() - 0.5) * fuzzRange * 0.5);
+                    const col = ctx.getImageData(i, 0, 1, h);
+                    ctx.clearRect(i, -fuzzRange, 1, tightHeight + 2 * fuzzRange);
+                    ctx.putImageData(col, i, dy);
+                }
+            }
+            rafId = requestAnimationFrame(run);
+        };
+        rafId = requestAnimationFrame(run);
+        const isInsideText = (x, y) => x >= interactiveLeft && x <= interactiveRight && y >= interactiveTop && y <= interactiveBottom;
+        const onMouseMove = (e) => {
+            if (!this.enableHover())
+                return;
+            const rect = canvas.getBoundingClientRect();
+            isHovering = isInsideText(e.clientX - rect.left, e.clientY - rect.top);
+        };
+        const onMouseLeave = () => {
+            isHovering = false;
+        };
+        const onTouchMove = (e) => {
+            if (!this.enableHover())
+                return;
+            e.preventDefault();
+            const rect = canvas.getBoundingClientRect();
+            const t = e.touches[0];
+            isHovering = isInsideText(t.clientX - rect.left, t.clientY - rect.top);
+        };
+        const onTouchEnd = () => {
+            isHovering = false;
+        };
+        const onClick = () => {
+            if (!this.clickEffect())
+                return;
+            isClicking = true;
+            clearTimeout(clickTimer);
+            clickTimer = setTimeout(() => {
+                isClicking = false;
+            }, 150);
+        };
+        if (this.enableHover()) {
+            canvas.addEventListener('mousemove', onMouseMove);
+            canvas.addEventListener('mouseleave', onMouseLeave);
+            canvas.addEventListener('touchmove', onTouchMove, { passive: false });
+            canvas.addEventListener('touchend', onTouchEnd);
+        }
+        if (this.clickEffect())
+            canvas.addEventListener('click', onClick);
+        this.teardown = () => {
+            cancelAnimationFrame(rafId);
+            clearTimeout(glitchOnTimer);
+            clearTimeout(glitchOffTimer);
+            clearTimeout(clickTimer);
+            canvas.removeEventListener('mousemove', onMouseMove);
+            canvas.removeEventListener('mouseleave', onMouseLeave);
+            canvas.removeEventListener('touchmove', onTouchMove);
+            canvas.removeEventListener('touchend', onTouchEnd);
+            canvas.removeEventListener('click', onClick);
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrFuzzyText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: WrFuzzyText, isStandalone: true, selector: "wr-fuzzy-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, fontWeight: { classPropertyName: "fontWeight", publicName: "fontWeight", isSignal: true, isRequired: false, transformFunction: null }, fontFamily: { classPropertyName: "fontFamily", publicName: "fontFamily", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, enableHover: { classPropertyName: "enableHover", publicName: "enableHover", isSignal: true, isRequired: false, transformFunction: null }, baseIntensity: { classPropertyName: "baseIntensity", publicName: "baseIntensity", isSignal: true, isRequired: false, transformFunction: null }, hoverIntensity: { classPropertyName: "hoverIntensity", publicName: "hoverIntensity", isSignal: true, isRequired: false, transformFunction: null }, fuzzRange: { classPropertyName: "fuzzRange", publicName: "fuzzRange", isSignal: true, isRequired: false, transformFunction: null }, fps: { classPropertyName: "fps", publicName: "fps", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, transitionDuration: { classPropertyName: "transitionDuration", publicName: "transitionDuration", isSignal: true, isRequired: false, transformFunction: null }, clickEffect: { classPropertyName: "clickEffect", publicName: "clickEffect", isSignal: true, isRequired: false, transformFunction: null }, glitchMode: { classPropertyName: "glitchMode", publicName: "glitchMode", isSignal: true, isRequired: false, transformFunction: null }, glitchInterval: { classPropertyName: "glitchInterval", publicName: "glitchInterval", isSignal: true, isRequired: false, transformFunction: null }, glitchDuration: { classPropertyName: "glitchDuration", publicName: "glitchDuration", isSignal: true, isRequired: false, transformFunction: null }, letterSpacing: { classPropertyName: "letterSpacing", publicName: "letterSpacing", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-fuzzy-text" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: '<canvas #canvas></canvas>', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrFuzzyText, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wr-fuzzy-text',
+                    template: '<canvas #canvas></canvas>',
+                    encapsulation: ViewEncapsulation.None,
+                    host: { class: 'wr-fuzzy-text' },
+                }]
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], fontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSize", required: false }] }], fontWeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontWeight", required: false }] }], fontFamily: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontFamily", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], gradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "gradient", required: false }] }], enableHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableHover", required: false }] }], baseIntensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseIntensity", required: false }] }], hoverIntensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverIntensity", required: false }] }], fuzzRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuzzRange", required: false }] }], fps: [{ type: i0.Input, args: [{ isSignal: true, alias: "fps", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], transitionDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionDuration", required: false }] }], clickEffect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickEffect", required: false }] }], glitchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "glitchMode", required: false }] }], glitchInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "glitchInterval", required: false }] }], glitchDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "glitchDuration", required: false }] }], letterSpacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "letterSpacing", required: false }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrFuzzyText };
+//# sourceMappingURL=ngwr-fuzzy-text.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-fuzzy-text.mjs","sources":["../../../projects/lib/fuzzy-text/fuzzy-text.ts","../../../projects/lib/fuzzy-text/ngwr-fuzzy-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 FuzzyText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/fuzzy-text\n *\n * Renders text to an offscreen 2D canvas, then redraws it onto the\n * visible canvas one row (or column) at a time with random horizontal /\n * vertical offsets. Intensity reacts to hover / click / glitch state.\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport type { ElementRef } from '@angular/core';\nimport {\n  Component,\n  DestroyRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  effect,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrFuzzyTextDirection } from './interfaces';\n\n/**\n * Canvas-rendered \"fuzzy\" text — each row/column of glyphs is offset by\n * a random amount per frame, giving the text a TV-static or motion-blur\n * appearance. Intensity ramps up on hover, click, and during periodic\n * glitch bursts (configurable).\n *\n * @example\n * ```html\n * <wr-fuzzy-text text=\"404\" />\n * <wr-fuzzy-text\n *   text=\"HELLO\"\n *   color=\"#0ea5e9\"\n *   [fuzzRange]=\"50\"\n *   [hoverIntensity]=\"0.8\"\n *   [glitchMode]=\"true\"\n * />\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/fuzzy-text\n */\n@Component({\n  selector: 'wr-fuzzy-text',\n  template: '<canvas #canvas></canvas>',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-fuzzy-text' },\n})\nexport class WrFuzzyText {\n  /** Text to render. */\n  readonly text = input.required<string>();\n\n  /** Font size as CSS length (`'4rem'`, `'72px'`, …) or px number. @default 'clamp(2rem, 10vw, 10rem)' */\n  readonly fontSize = input<string | number>('clamp(2rem, 10vw, 10rem)');\n\n  /** Font weight. @default 900 */\n  readonly fontWeight = input<number | string>(900);\n\n  /** Font family. `'inherit'` reads the canvas's computed style. @default 'inherit' */\n  readonly fontFamily = input('inherit');\n\n  /** Text colour. Ignored if `[gradient]` is set. @default '#fff' */\n  readonly color = input('#fff');\n\n  /** Optional horizontal gradient stops. */\n  readonly gradient = input<readonly string[] | null>(null);\n\n  /** Enable hover / touch reactivity. @default true */\n  readonly enableHover = input(true, { transform: coerceBooleanProperty });\n\n  /** Base intensity (0..1) when idle. @default 0.18 */\n  readonly baseIntensity = input(0.18, { transform: numAttr(0.18) });\n\n  /** Intensity (0..1) while the pointer hovers the text. @default 0.5 */\n  readonly hoverIntensity = input(0.5, { transform: numAttr(0.5) });\n\n  /** Max pixel displacement per row/column at intensity 1. @default 30 */\n  readonly fuzzRange = input(30, { transform: numAttr(30) });\n\n  /** Frame rate cap. @default 60 */\n  readonly fps = input(60, { transform: numAttr(60) });\n\n  /** Fuzz direction. @default 'horizontal' */\n  readonly direction = input<WrFuzzyTextDirection>('horizontal');\n\n  /** Ms to ease intensity toward target. `0` snaps. @default 0 */\n  readonly transitionDuration = input(0, { transform: numAttr(0) });\n\n  /** Spike to full intensity briefly on click. @default false */\n  readonly clickEffect = input(false, { transform: coerceBooleanProperty });\n\n  /** Periodic \"glitch\" bursts at full intensity. @default false */\n  readonly glitchMode = input(false, { transform: coerceBooleanProperty });\n\n  /** Ms between glitch bursts. @default 2000 */\n  readonly glitchInterval = input(2000, { transform: numAttr(2000) });\n\n  /** Ms a glitch burst lasts. @default 200 */\n  readonly glitchDuration = input(200, { transform: numAttr(200) });\n\n  /** Extra pixels between glyphs. @default 0 */\n  readonly letterSpacing = input(0, { transform: numAttr(0) });\n\n  private readonly canvasRef = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n\n  private teardown: (() => void) | undefined;\n\n  constructor() {\n    if (!this.isBrowser) return;\n\n    afterNextRender(() => {\n      void this.init();\n    });\n\n    // Re-init whenever any input that affects the offscreen rendering changes.\n    effect(() => {\n      this.text();\n      this.fontSize();\n      this.fontWeight();\n      this.fontFamily();\n      this.color();\n      this.gradient();\n      this.letterSpacing();\n      this.direction();\n      this.fuzzRange();\n      this.fps();\n      this.glitchMode();\n      this.glitchInterval();\n      this.glitchDuration();\n      // Skip if we haven't booted yet.\n      if (!this.teardown) return;\n      this.teardown();\n      this.teardown = undefined;\n      queueMicrotask(() => {\n        void this.init();\n      });\n    });\n\n    this.destroyRef.onDestroy(() => this.teardown?.());\n  }\n\n  // Init / loop\n\n  private async init(): Promise<void> {\n    const canvas = this.canvasRef().nativeElement;\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n\n    const fontFamily =\n      this.fontFamily() === 'inherit' ? window.getComputedStyle(canvas).fontFamily || 'sans-serif' : this.fontFamily();\n    const fontSize = this.fontSize();\n    const fontSizeStr = typeof fontSize === 'number' ? `${fontSize}px` : fontSize;\n    const fontWeight = this.fontWeight();\n    const fontString = `${fontWeight} ${fontSizeStr} ${fontFamily}`;\n\n    try {\n      await document.fonts.load(fontString);\n    } catch {\n      await document.fonts.ready;\n    }\n\n    // Numeric font size for buffer maths.\n    let numericFontSize: number;\n    if (typeof fontSize === 'number') {\n      numericFontSize = fontSize;\n    } else {\n      const tmp = document.createElement('span');\n      tmp.style.fontSize = fontSize;\n      document.body.appendChild(tmp);\n      numericFontSize = Number.parseFloat(window.getComputedStyle(tmp).fontSize);\n      document.body.removeChild(tmp);\n    }\n\n    const text = this.text();\n    const letterSpacing = this.letterSpacing();\n    const fuzzRange = this.fuzzRange();\n    const direction = this.direction();\n\n    // Offscreen canvas with the laid-out text.\n    const offscreen = document.createElement('canvas');\n    const offCtx = offscreen.getContext('2d');\n    if (!offCtx) return;\n    offCtx.font = fontString;\n    offCtx.textBaseline = 'alphabetic';\n\n    let totalWidth = 0;\n    if (letterSpacing !== 0) {\n      for (const ch of text) totalWidth += offCtx.measureText(ch).width + letterSpacing;\n      totalWidth -= letterSpacing;\n    } else {\n      totalWidth = offCtx.measureText(text).width;\n    }\n    const m = offCtx.measureText(text);\n    const actualLeft = m.actualBoundingBoxLeft ?? 0;\n    const actualRight = letterSpacing !== 0 ? totalWidth : (m.actualBoundingBoxRight ?? m.width);\n    const actualAscent = m.actualBoundingBoxAscent ?? numericFontSize;\n    const actualDescent = m.actualBoundingBoxDescent ?? numericFontSize * 0.2;\n    const textBoundingWidth = Math.ceil(letterSpacing !== 0 ? totalWidth : actualLeft + actualRight);\n    const tightHeight = Math.ceil(actualAscent + actualDescent);\n\n    const extraWidthBuffer = 10;\n    const offscreenWidth = textBoundingWidth + extraWidthBuffer;\n    offscreen.width = offscreenWidth;\n    offscreen.height = tightHeight;\n    const xOffset = extraWidthBuffer / 2;\n\n    offCtx.font = fontString;\n    offCtx.textBaseline = 'alphabetic';\n\n    const gradient = this.gradient();\n    if (gradient && gradient.length >= 2) {\n      const g = offCtx.createLinearGradient(0, 0, offscreenWidth, 0);\n      gradient.forEach((c, i) => g.addColorStop(i / (gradient.length - 1), c));\n      offCtx.fillStyle = g;\n    } else {\n      offCtx.fillStyle = this.color();\n    }\n\n    if (letterSpacing !== 0) {\n      let xPos = xOffset;\n      for (const ch of text) {\n        offCtx.fillText(ch, xPos, actualAscent);\n        xPos += offCtx.measureText(ch).width + letterSpacing;\n      }\n    } else {\n      offCtx.fillText(text, xOffset - actualLeft, actualAscent);\n    }\n\n    // Size the visible canvas, leaving room for the max horizontal fuzz.\n    const horizontalMargin = fuzzRange + 20;\n    const verticalMargin = 0;\n    canvas.width = offscreenWidth + horizontalMargin * 2;\n    canvas.height = tightHeight + verticalMargin * 2;\n    ctx.translate(horizontalMargin, verticalMargin);\n\n    const interactiveLeft = horizontalMargin + xOffset;\n    const interactiveTop = verticalMargin;\n    const interactiveRight = interactiveLeft + textBoundingWidth;\n    const interactiveBottom = interactiveTop + tightHeight;\n\n    // Reduced motion: paint the text once, clean — no fuzz loop, no\n    // glitch bursts, no pointer reactivity. Teardown must still be set\n    // so the re-init effect keeps redrawing on input changes.\n    if (this.platform.prefersReducedMotion()) {\n      ctx.drawImage(offscreen, 0, 0);\n      this.teardown = (): void => undefined;\n      return;\n    }\n\n    let isHovering = false;\n    let isClicking = false;\n    let isGlitching = false;\n    let currentIntensity = this.baseIntensity();\n    let targetIntensity = currentIntensity;\n    let lastFrame = 0;\n    const frameDuration = 1000 / this.fps();\n\n    let rafId = 0;\n    let glitchOnTimer: ReturnType<typeof setTimeout> | undefined;\n    let glitchOffTimer: ReturnType<typeof setTimeout> | undefined;\n    let clickTimer: ReturnType<typeof setTimeout> | undefined;\n\n    const startGlitchLoop = (): void => {\n      if (!this.glitchMode()) return;\n      glitchOnTimer = setTimeout(() => {\n        isGlitching = true;\n        glitchOffTimer = setTimeout(() => {\n          isGlitching = false;\n          startGlitchLoop();\n        }, this.glitchDuration());\n      }, this.glitchInterval());\n    };\n    if (this.glitchMode()) startGlitchLoop();\n\n    const run = (ts: number): void => {\n      if (ts - lastFrame < frameDuration) {\n        rafId = requestAnimationFrame(run);\n        return;\n      }\n      lastFrame = ts;\n\n      ctx.clearRect(\n        -fuzzRange - 20,\n        -fuzzRange - 10,\n        offscreenWidth + 2 * (fuzzRange + 20),\n        tightHeight + 2 * (fuzzRange + 10)\n      );\n\n      if (isClicking) targetIntensity = 1;\n      else if (isGlitching) targetIntensity = 1;\n      else if (isHovering) targetIntensity = this.hoverIntensity();\n      else targetIntensity = this.baseIntensity();\n\n      const td = this.transitionDuration();\n      if (td > 0) {\n        const step = 1 / (td / frameDuration);\n        if (currentIntensity < targetIntensity) currentIntensity = Math.min(currentIntensity + step, targetIntensity);\n        else if (currentIntensity > targetIntensity)\n          currentIntensity = Math.max(currentIntensity - step, targetIntensity);\n      } else {\n        currentIntensity = targetIntensity;\n      }\n\n      if (direction === 'horizontal') {\n        for (let j = 0; j < tightHeight; j++) {\n          const dx = Math.floor(currentIntensity * (Math.random() - 0.5) * fuzzRange);\n          ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1);\n        }\n      } else if (direction === 'vertical') {\n        for (let i = 0; i < offscreenWidth; i++) {\n          const dy = Math.floor(currentIntensity * (Math.random() - 0.5) * fuzzRange);\n          ctx.drawImage(offscreen, i, 0, 1, tightHeight, i, dy, 1, tightHeight);\n        }\n      } else {\n        // both: horizontal pass then vertical pass on the result\n        for (let j = 0; j < tightHeight; j++) {\n          const dx = Math.floor(currentIntensity * (Math.random() - 0.5) * fuzzRange);\n          ctx.drawImage(offscreen, 0, j, offscreenWidth, 1, dx, j, offscreenWidth, 1);\n        }\n        const w = offscreenWidth + fuzzRange;\n        const h = tightHeight + fuzzRange;\n        const data = ctx.getImageData(0, 0, w, h);\n        ctx.clearRect(\n          -fuzzRange - 20,\n          -fuzzRange - 10,\n          offscreenWidth + 2 * (fuzzRange + 20),\n          tightHeight + 2 * (fuzzRange + 10)\n        );\n        ctx.putImageData(data, 0, 0);\n        for (let i = 0; i < w; i++) {\n          const dy = Math.floor(currentIntensity * (Math.random() - 0.5) * fuzzRange * 0.5);\n          const col = ctx.getImageData(i, 0, 1, h);\n          ctx.clearRect(i, -fuzzRange, 1, tightHeight + 2 * fuzzRange);\n          ctx.putImageData(col, i, dy);\n        }\n      }\n\n      rafId = requestAnimationFrame(run);\n    };\n    rafId = requestAnimationFrame(run);\n\n    const isInsideText = (x: number, y: number): boolean =>\n      x >= interactiveLeft && x <= interactiveRight && y >= interactiveTop && y <= interactiveBottom;\n\n    const onMouseMove = (e: MouseEvent): void => {\n      if (!this.enableHover()) return;\n      const rect = canvas.getBoundingClientRect();\n      isHovering = isInsideText(e.clientX - rect.left, e.clientY - rect.top);\n    };\n    const onMouseLeave = (): void => {\n      isHovering = false;\n    };\n    const onTouchMove = (e: TouchEvent): void => {\n      if (!this.enableHover()) return;\n      e.preventDefault();\n      const rect = canvas.getBoundingClientRect();\n      const t = e.touches[0];\n      isHovering = isInsideText(t.clientX - rect.left, t.clientY - rect.top);\n    };\n    const onTouchEnd = (): void => {\n      isHovering = false;\n    };\n    const onClick = (): void => {\n      if (!this.clickEffect()) return;\n      isClicking = true;\n      clearTimeout(clickTimer);\n      clickTimer = setTimeout(() => {\n        isClicking = false;\n      }, 150);\n    };\n\n    if (this.enableHover()) {\n      canvas.addEventListener('mousemove', onMouseMove);\n      canvas.addEventListener('mouseleave', onMouseLeave);\n      canvas.addEventListener('touchmove', onTouchMove, { passive: false });\n      canvas.addEventListener('touchend', onTouchEnd);\n    }\n    if (this.clickEffect()) canvas.addEventListener('click', onClick);\n\n    this.teardown = (): void => {\n      cancelAnimationFrame(rafId);\n      clearTimeout(glitchOnTimer);\n      clearTimeout(glitchOffTimer);\n      clearTimeout(clickTimer);\n      canvas.removeEventListener('mousemove', onMouseMove);\n      canvas.removeEventListener('mouseleave', onMouseLeave);\n      canvas.removeEventListener('touchmove', onTouchMove);\n      canvas.removeEventListener('touchend', onTouchEnd);\n      canvas.removeEventListener('click', onClick);\n    };\n  }\n}\n\nexport type { WrFuzzyTextDirection } from './interfaces';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-gauge.mjs

@@ -0,0 +1,83 @@
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, Component } from '@angular/core';
+import { clamp } 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
+ */
+/**
+ * Semicircle progress gauge. Display-only — for interactive use see the
+ * {@link WrKnob} from `ngwr/knob`.
+ *
+ * @example
+ * ```html
+ * <wr-gauge [value]="72" />
+ * <wr-gauge [value]="9.5" [min]="0" [max]="10" suffix="/10" valueColor="var(--wr-color-warning)" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/gauge
+ */
+class WrGauge {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (v) => coerceNumberProperty(v, 0) });
+    max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (v) => coerceNumberProperty(v, 100) });
+    /** Diameter in CSS pixels. @default 160 */
+    size = input(160, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(48, coerceNumberProperty(v, 160)) });
+    /** Arc stroke thickness in viewBox units (out of 100). @default 10 */
+    strokeWidth = input(10, { ...(ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(1, coerceNumberProperty(v, 10)) });
+    trackColor = input('rgba(var(--wr-color-light-rgb), 0.6)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackColor" }] : /* istanbul ignore next */ []));
+    valueColor = input('var(--wr-color-primary)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []));
+    /** Show the value text in the center. @default true */
+    showValue = input(true, { ...(ngDevMode ? { debugName: "showValue" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    suffix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    // Geometry — semicircle in a 100×56 viewBox (centre at 50, 50).
+    cx = 50;
+    cy = 50;
+    radius = computed(() => 50 - this.strokeWidth() / 2 - 0.5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    ratio = computed(() => {
+        const range = this.max() - this.min();
+        if (range <= 0)
+            return 0;
+        return clamp((this.value() - this.min()) / range, 0, 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []));
+    trackPath = computed(() => {
+        const r = this.radius();
+        return `M ${this.cx - r} ${this.cy} A ${r} ${r} 0 0 1 ${this.cx + r} ${this.cy}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackPath" }] : /* istanbul ignore next */ []));
+    valuePath = computed(() => {
+        const r = this.radius();
+        const angle = Math.PI * (1 - this.ratio());
+        const ex = this.cx + r * Math.cos(angle);
+        const ey = this.cy - r * Math.sin(angle);
+        // The arc always spans `π × ratio` radians (≤ 180°), so largeArc stays 0.
+        // Previously this was set to 1 when ratio > 0.5, which made the swept arc
+        // take the long way round and visually flipped the bar.
+        return `M ${this.cx - r} ${this.cy} A ${r} ${r} 0 0 1 ${ex.toFixed(2)} ${ey.toFixed(2)}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valuePath" }] : /* istanbul ignore next */ []));
+    viewBox = '0 0 100 56';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrGauge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrGauge, isStandalone: true, selector: "wr-gauge", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, trackColor: { classPropertyName: "trackColor", publicName: "trackColor", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-gauge" }, ngImport: i0, template: "<div class=\"wr-gauge__surface\" [style.width.px]=\"size()\">\n  <svg [attr.viewBox]=\"viewBox\" aria-hidden=\"true\">\n    <path\n      [attr.d]=\"trackPath()\"\n      fill=\"none\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      [attr.d]=\"valuePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n  @if (showValue()) {\n    <div class=\"wr-gauge__text\">\n      {{ value() }}<span class=\"wr-gauge__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrGauge, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-gauge', encapsulation: ViewEncapsulation.None, host: { class: 'wr-gauge' }, template: "<div class=\"wr-gauge__surface\" [style.width.px]=\"size()\">\n  <svg [attr.viewBox]=\"viewBox\" aria-hidden=\"true\">\n    <path\n      [attr.d]=\"trackPath()\"\n      fill=\"none\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      [attr.d]=\"valuePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n  @if (showValue()) {\n    <div class=\"wr-gauge__text\">\n      {{ value() }}<span class=\"wr-gauge__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], trackColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackColor", required: false }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrGauge };
+//# sourceMappingURL=ngwr-gauge.mjs.map

package/fesm2022/ngwr-gauge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-gauge.mjs","sources":["../../../projects/lib/gauge/gauge.ts","../../../projects/lib/gauge/gauge.html","../../../projects/lib/gauge/ngwr-gauge.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, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport { clamp } from 'ngwr/utils';\n\n/**\n * Semicircle progress gauge. Display-only — for interactive use see the\n * {@link WrKnob} from `ngwr/knob`.\n *\n * @example\n * ```html\n * <wr-gauge [value]=\"72\" />\n * <wr-gauge [value]=\"9.5\" [min]=\"0\" [max]=\"10\" suffix=\"/10\" valueColor=\"var(--wr-color-warning)\" />\n * ```\n *\n * @see https://ngwr.dev/components/gauge\n */\n@Component({\n  selector: 'wr-gauge',\n  templateUrl: './gauge.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-gauge' },\n})\nexport class WrGauge {\n  readonly value = input.required<number>();\n  readonly min = input(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n  readonly max = input(100, { transform: (v: unknown): number => coerceNumberProperty(v, 100) });\n\n  /** Diameter in CSS pixels. @default 160 */\n  readonly size = input(160, { transform: (v: unknown): number => Math.max(48, coerceNumberProperty(v, 160)) });\n\n  /** Arc stroke thickness in viewBox units (out of 100). @default 10 */\n  readonly strokeWidth = input(10, {\n    transform: (v: unknown): number => Math.max(1, coerceNumberProperty(v, 10)),\n  });\n\n  readonly trackColor = input<string>('rgba(var(--wr-color-light-rgb), 0.6)');\n  readonly valueColor = input<string>('var(--wr-color-primary)');\n\n  /** Show the value text in the center. @default true */\n  readonly showValue = input(true, { transform: coerceBooleanProperty });\n\n  readonly suffix = input<string>('');\n\n  // Geometry — semicircle in a 100×56 viewBox (centre at 50, 50).\n  protected readonly cx = 50;\n  protected readonly cy = 50;\n  protected readonly radius = computed(() => 50 - this.strokeWidth() / 2 - 0.5);\n\n  protected readonly ratio = computed(() => {\n    const range = this.max() - this.min();\n    if (range <= 0) return 0;\n    return clamp((this.value() - this.min()) / range, 0, 1);\n  });\n\n  protected readonly trackPath = computed(() => {\n    const r = this.radius();\n    return `M ${this.cx - r} ${this.cy} A ${r} ${r} 0 0 1 ${this.cx + r} ${this.cy}`;\n  });\n\n  protected readonly valuePath = computed(() => {\n    const r = this.radius();\n    const angle = Math.PI * (1 - this.ratio());\n    const ex = this.cx + r * Math.cos(angle);\n    const ey = this.cy - r * Math.sin(angle);\n    // The arc always spans `π × ratio` radians (≤ 180°), so largeArc stays 0.\n    // Previously this was set to 1 when ratio > 0.5, which made the swept arc\n    // take the long way round and visually flipped the bar.\n    return `M ${this.cx - r} ${this.cy} A ${r} ${r} 0 0 1 ${ex.toFixed(2)} ${ey.toFixed(2)}`;\n  });\n\n  protected readonly viewBox = '0 0 100 56';\n}\n","<div class=\"wr-gauge__surface\" [style.width.px]=\"size()\">\n  <svg [attr.viewBox]=\"viewBox\" aria-hidden=\"true\">\n    <path\n      [attr.d]=\"trackPath()\"\n      fill=\"none\"\n      [attr.stroke]=\"trackColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n    />\n    <path\n      [attr.d]=\"valuePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"valueColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n  @if (showValue()) {\n    <div class=\"wr-gauge__text\">\n      {{ value() }}<span class=\"wr-gauge__suffix\">{{ suffix() }}</span>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;AAWG;MAOU,OAAO,CAAA;IACT,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU;AAChC,IAAA,GAAG,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,KAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;AACjF,IAAA,GAAG,GAAG,KAAK,CAAC,GAAG,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,KAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,oBAAoB,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG;;IAGrF,IAAI,GAAG,KAAK,CAAC,GAAG,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,MAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,oBAAoB,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAA,CAAG;;IAGpG,WAAW,GAAG,KAAK,CAAC,EAAE,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,aAAA,EAAA,8BAAA,EAAA,CAAA,EAC7B,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAA,CAC3E;IAEO,UAAU,GAAG,KAAK,CAAS,sCAAsC;mFAAC;IAClE,UAAU,GAAG,KAAK,CAAS,yBAAyB;mFAAC;;IAGrD,SAAS,GAAG,KAAK,CAAC,IAAI,iFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;IAE7D,MAAM,GAAG,KAAK,CAAS,EAAE;+EAAC;;IAGhB,EAAE,GAAG,EAAE;IACP,EAAE,GAAG,EAAE;AACP,IAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,CAAC,GAAG,GAAG;+EAAC;AAE1D,IAAA,KAAK,GAAG,QAAQ,CAAC,MAAK;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;QACrC,IAAI,KAAK,IAAI,CAAC;AAAE,YAAA,OAAO,CAAC;QACxB,OAAO,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IACzD,CAAC;8EAAC;AAEiB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;AAC3C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE;QACvB,OAAO,CAAA,EAAA,EAAK,IAAI,CAAC,EAAE,GAAG,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,GAAA,EAAM,CAAC,IAAI,CAAC,CAAA,OAAA,EAAU,IAAI,CAAC,EAAE,GAAG,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,CAAE;IAClF,CAAC;kFAAC;AAEiB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;AAC3C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE;AACvB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;AAC1C,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;;;;AAIxC,QAAA,OAAO,CAAA,EAAA,EAAK,IAAI,CAAC,EAAE,GAAG,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,EAAE,CAAA,GAAA,EAAM,CAAC,CAAA,CAAA,EAAI,CAAC,CAAA,OAAA,EAAU,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;IAC1F,CAAC;kFAAC;IAEiB,OAAO,GAAG,YAAY;uGAhD9B,OAAO,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAP,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,OAAO,6tCC9BpB,ypBAuBA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDOa,OAAO,EAAA,UAAA,EAAA,CAAA;kBANnB,SAAS;+BACE,UAAU,EAAA,aAAA,EAEL,iBAAiB,CAAC,IAAI,QAC/B,EAAE,KAAK,EAAE,UAAU,EAAE,EAAA,QAAA,EAAA,ypBAAA,EAAA;;;AE5B7B;;AAEG;;;;"}

package/fesm2022/ngwr-glitch-text.mjs

@@ -0,0 +1,67 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, Component } from '@angular/core';
+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 GlitchText effect by David Haz / reactbits.dev.
+ * Original: https://www.reactbits.dev/text-animations/glitch-text
+ *
+ * Pure CSS — two `::before` / `::after` clones offset by ±10px with
+ * coloured `text-shadow`s, both running a clip-path keyframe to slice
+ * random horizontal bands.
+ */
+/**
+ * Glitchy text effect — colour-split horizontal-tear glitch on the
+ * provided text. Defaults to playing constantly; toggle `[enableOnHover]`
+ * to make it idle until the user hovers.
+ *
+ * @example
+ * ```html
+ * <wr-glitch-text text="404" />
+ * <wr-glitch-text text="ERROR" [speed]="0.5" [enableOnHover]="true" />
+ * ```
+ *
+ * @see https://www.reactbits.dev/text-animations/glitch-text
+ */
+class WrGlitchText {
+    /** Text to glitch. Required — the value populates `data-text` for the pseudo clones. */
+    text = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Time multiplier — higher = slower glitching. @default 1 */
+    speed = input(1, { ...(ngDevMode ? { debugName: "speed" } : /* istanbul ignore next */ {}), transform: numAttr(1) });
+    /** Show the red / cyan colour-split shadows. @default true */
+    enableShadows = input(true, { ...(ngDevMode ? { debugName: "enableShadows" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Only glitch on hover (idle until then). @default true */
+    enableOnHover = input(true, { ...(ngDevMode ? { debugName: "enableOnHover" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    beforeShadow = computed(() => (this.enableShadows() ? '5px 0 cyan' : 'none'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "beforeShadow" }] : /* istanbul ignore next */ []));
+    afterShadow = computed(() => (this.enableShadows() ? '-5px 0 red' : 'none'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "afterShadow" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrGlitchText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: WrGlitchText, isStandalone: true, selector: "wr-glitch-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, enableShadows: { classPropertyName: "enableShadows", publicName: "enableShadows", isSignal: true, isRequired: false, transformFunction: null }, enableOnHover: { classPropertyName: "enableOnHover", publicName: "enableOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.wr-glitch-text--hover-only": "enableOnHover()", "attr.data-text": "text()", "style.--wr-glitch-text-before-duration": "(speed() * 2) + 's'", "style.--wr-glitch-text-after-duration": "(speed() * 3) + 's'", "style.--wr-glitch-text-before-shadow": "beforeShadow()", "style.--wr-glitch-text-after-shadow": "afterShadow()" }, classAttribute: "wr-glitch-text" }, ngImport: i0, template: '{{ text() }}', isInline: true, styles: [".wr-glitch-text{--wr-glitch-text-before-duration: 2s;--wr-glitch-text-after-duration: 3s;--wr-glitch-text-before-shadow: 5px 0 cyan;--wr-glitch-text-after-shadow: -5px 0 red;--wr-glitch-text-bg: var(--wr-color-white, #fff);position:relative;display:inline-block;white-space:nowrap;-webkit-user-select:none;user-select:none;font-weight:900;color:var(--wr-color-dark, #0f172a)}.wr-glitch-text:before,.wr-glitch-text:after{content:attr(data-text);position:absolute;top:0;color:inherit;background-color:var(--wr-glitch-text-bg);overflow:hidden;clip-path:inset(0 0 0 0)}.wr-glitch-text:not(.wr-glitch-text--hover-only):before{left:-10px;text-shadow:var(--wr-glitch-text-before-shadow);animation:wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse}.wr-glitch-text:not(.wr-glitch-text--hover-only):after{left:10px;text-shadow:var(--wr-glitch-text-after-shadow);animation:wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse}.wr-glitch-text--hover-only:before,.wr-glitch-text--hover-only:after{content:\"\";opacity:0;animation:none}.wr-glitch-text--hover-only:hover:before{content:attr(data-text);opacity:1;left:-10px;text-shadow:var(--wr-glitch-text-before-shadow);animation:wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse}.wr-glitch-text--hover-only:hover:after{content:attr(data-text);opacity:1;left:10px;text-shadow:var(--wr-glitch-text-after-shadow);animation:wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse}@media(prefers-reduced-motion:reduce){.wr-glitch-text:before,.wr-glitch-text:after{content:\"\"!important;opacity:0!important;animation:none!important}}@keyframes wr-glitch-text-tear{0%{clip-path:inset(20% 0 50% 0)}5%{clip-path:inset(10% 0 60% 0)}10%{clip-path:inset(15% 0 55% 0)}15%{clip-path:inset(25% 0 35% 0)}20%{clip-path:inset(30% 0 40% 0)}25%{clip-path:inset(40% 0 20% 0)}30%{clip-path:inset(10% 0 60% 0)}35%{clip-path:inset(15% 0 55% 0)}40%{clip-path:inset(25% 0 35% 0)}45%{clip-path:inset(30% 0 40% 0)}50%{clip-path:inset(20% 0 50% 0)}55%{clip-path:inset(10% 0 60% 0)}60%{clip-path:inset(15% 0 55% 0)}65%{clip-path:inset(25% 0 35% 0)}70%{clip-path:inset(30% 0 40% 0)}75%{clip-path:inset(40% 0 20% 0)}80%{clip-path:inset(20% 0 50% 0)}85%{clip-path:inset(10% 0 60% 0)}90%{clip-path:inset(15% 0 55% 0)}95%{clip-path:inset(25% 0 35% 0)}to{clip-path:inset(30% 0 40% 0)}}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrGlitchText, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-glitch-text', template: '{{ text() }}', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'wr-glitch-text',
+                        '[class.wr-glitch-text--hover-only]': 'enableOnHover()',
+                        '[attr.data-text]': 'text()',
+                        '[style.--wr-glitch-text-before-duration]': "(speed() * 2) + 's'",
+                        '[style.--wr-glitch-text-after-duration]': "(speed() * 3) + 's'",
+                        '[style.--wr-glitch-text-before-shadow]': 'beforeShadow()',
+                        '[style.--wr-glitch-text-after-shadow]': 'afterShadow()',
+                    }, styles: [".wr-glitch-text{--wr-glitch-text-before-duration: 2s;--wr-glitch-text-after-duration: 3s;--wr-glitch-text-before-shadow: 5px 0 cyan;--wr-glitch-text-after-shadow: -5px 0 red;--wr-glitch-text-bg: var(--wr-color-white, #fff);position:relative;display:inline-block;white-space:nowrap;-webkit-user-select:none;user-select:none;font-weight:900;color:var(--wr-color-dark, #0f172a)}.wr-glitch-text:before,.wr-glitch-text:after{content:attr(data-text);position:absolute;top:0;color:inherit;background-color:var(--wr-glitch-text-bg);overflow:hidden;clip-path:inset(0 0 0 0)}.wr-glitch-text:not(.wr-glitch-text--hover-only):before{left:-10px;text-shadow:var(--wr-glitch-text-before-shadow);animation:wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse}.wr-glitch-text:not(.wr-glitch-text--hover-only):after{left:10px;text-shadow:var(--wr-glitch-text-after-shadow);animation:wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse}.wr-glitch-text--hover-only:before,.wr-glitch-text--hover-only:after{content:\"\";opacity:0;animation:none}.wr-glitch-text--hover-only:hover:before{content:attr(data-text);opacity:1;left:-10px;text-shadow:var(--wr-glitch-text-before-shadow);animation:wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse}.wr-glitch-text--hover-only:hover:after{content:attr(data-text);opacity:1;left:10px;text-shadow:var(--wr-glitch-text-after-shadow);animation:wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse}@media(prefers-reduced-motion:reduce){.wr-glitch-text:before,.wr-glitch-text:after{content:\"\"!important;opacity:0!important;animation:none!important}}@keyframes wr-glitch-text-tear{0%{clip-path:inset(20% 0 50% 0)}5%{clip-path:inset(10% 0 60% 0)}10%{clip-path:inset(15% 0 55% 0)}15%{clip-path:inset(25% 0 35% 0)}20%{clip-path:inset(30% 0 40% 0)}25%{clip-path:inset(40% 0 20% 0)}30%{clip-path:inset(10% 0 60% 0)}35%{clip-path:inset(15% 0 55% 0)}40%{clip-path:inset(25% 0 35% 0)}45%{clip-path:inset(30% 0 40% 0)}50%{clip-path:inset(20% 0 50% 0)}55%{clip-path:inset(10% 0 60% 0)}60%{clip-path:inset(15% 0 55% 0)}65%{clip-path:inset(25% 0 35% 0)}70%{clip-path:inset(30% 0 40% 0)}75%{clip-path:inset(40% 0 20% 0)}80%{clip-path:inset(20% 0 50% 0)}85%{clip-path:inset(10% 0 60% 0)}90%{clip-path:inset(15% 0 55% 0)}95%{clip-path:inset(25% 0 35% 0)}to{clip-path:inset(30% 0 40% 0)}}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], enableShadows: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableShadows", required: false }] }], enableOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableOnHover", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrGlitchText };
+//# sourceMappingURL=ngwr-glitch-text.mjs.map