ngwr 6.1.1 → 7.0.0

package/fesm2022/ngwr-bar-chart.mjs

@@ -0,0 +1,69 @@
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, Component } from '@angular/core';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Minimal vertical bar chart. Pass `[data]` — each datum becomes a bar.
+ * Axis-free; for the simple "show me a comparison" case.
+ *
+ * @example
+ * ```html
+ * <wr-bar-chart [data]="[
+ *   { label: 'Mon', value: 12 },
+ *   { label: 'Tue', value: 18, color: 'var(--wr-color-success)' },
+ *   { label: 'Wed', value: 9 }
+ * ]" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/bar-chart
+ */
+class WrBarChart {
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Default bar colour when a datum has none. @default primary */
+    color = input('var(--wr-color-primary)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Show value labels above each bar. @default true */
+    showValues = input(true, { ...(ngDevMode ? { debugName: "showValues" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Pixel height of the chart area. @default 200 */
+    height = input(200, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(40, coerceNumberProperty(v, 200)) });
+    /** Explicit max value. `0` = auto. @default 0 */
+    max = input(0, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    resolvedMax = computed(() => {
+        const explicit = this.max();
+        if (explicit > 0)
+            return explicit;
+        const data = this.data();
+        if (data.length === 0)
+            return 1;
+        const top = Math.max(...data.map(d => d.value), 0);
+        return top > 0 ? top : 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMax" }] : /* istanbul ignore next */ []));
+    bars = computed(() => this.data().map(d => ({
+        label: d.label,
+        value: d.value,
+        color: d.color ?? this.color(),
+        heightPercent: (Math.max(0, d.value) / this.resolvedMax()) * 100,
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrBarChart, isStandalone: true, selector: "wr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-bar-chart" }, ngImport: i0, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<div class=\"wr-bar-chart__labels\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrBarChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-bar-chart', encapsulation: ViewEncapsulation.None, host: { class: 'wr-bar-chart' }, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<div class=\"wr-bar-chart__labels\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrBarChart };
+//# sourceMappingURL=ngwr-bar-chart.mjs.map

package/fesm2022/ngwr-bar-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-bar-chart.mjs","sources":["../../../projects/lib/bar-chart/bar-chart.ts","../../../projects/lib/bar-chart/bar-chart.html","../../../projects/lib/bar-chart/ngwr-bar-chart.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 type { WrBarChartDatum } from './interfaces';\n\n/**\n * Minimal vertical bar chart. Pass `[data]` — each datum becomes a bar.\n * Axis-free; for the simple \"show me a comparison\" case.\n *\n * @example\n * ```html\n * <wr-bar-chart [data]=\"[\n *   { label: 'Mon', value: 12 },\n *   { label: 'Tue', value: 18, color: 'var(--wr-color-success)' },\n *   { label: 'Wed', value: 9 }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/components/bar-chart\n */\n@Component({\n  selector: 'wr-bar-chart',\n  templateUrl: './bar-chart.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-bar-chart' },\n})\nexport class WrBarChart {\n  readonly data = input<readonly WrBarChartDatum[]>([]);\n\n  /** Default bar colour when a datum has none. @default primary */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Show value labels above each bar. @default true */\n  readonly showValues = input(true, { transform: coerceBooleanProperty });\n\n  /** Pixel height of the chart area. @default 200 */\n  readonly height = input(200, { transform: (v: unknown): number => Math.max(40, coerceNumberProperty(v, 200)) });\n\n  /** Explicit max value. `0` = auto. @default 0 */\n  readonly max = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  protected readonly resolvedMax = computed(() => {\n    const explicit = this.max();\n    if (explicit > 0) return explicit;\n    const data = this.data();\n    if (data.length === 0) return 1;\n    const top = Math.max(...data.map(d => d.value), 0);\n    return top > 0 ? top : 1;\n  });\n\n  protected readonly bars = computed(() =>\n    this.data().map(d => ({\n      label: d.label,\n      value: d.value,\n      color: d.color ?? this.color(),\n      heightPercent: (Math.max(0, d.value) / this.resolvedMax()) * 100,\n    }))\n  );\n}\n\nexport type { WrBarChartDatum } from './interfaces';\n","<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<div class=\"wr-bar-chart__labels\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;;;;AAcG;MAOU,UAAU,CAAA;IACZ,IAAI,GAAG,KAAK,CAA6B,EAAE;6EAAC;;IAG5C,KAAK,GAAG,KAAK,CAAS,yBAAyB;8EAAC;;IAGhD,UAAU,GAAG,KAAK,CAAC,IAAI,kFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAG9D,MAAM,GAAG,KAAK,CAAC,GAAG,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,QAAA,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;;IAGtG,GAAG,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,KAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAA,CAAG;AAEpF,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE;QAC3B,IAAI,QAAQ,GAAG,CAAC;AAAE,YAAA,OAAO,QAAQ;AACjC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,CAAC;QAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAClD,OAAO,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;IAC1B,CAAC;oFAAC;AAEiB,IAAA,IAAI,GAAG,QAAQ,CAAC,MACjC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK;QACpB,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,KAAK,EAAE,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;AAC9B,QAAA,aAAa,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG;AACjE,KAAA,CAAC,CAAC;6EACJ;uGA/BU,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,+tBCjCvB,2iBAeA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDkBa,UAAU,EAAA,UAAA,EAAA,CAAA;kBANtB,SAAS;+BACE,cAAc,EAAA,aAAA,EAET,iBAAiB,CAAC,IAAI,QAC/B,EAAE,KAAK,EAAE,cAAc,EAAE,EAAA,QAAA,EAAA,2iBAAA,EAAA;;;AE/BjC;;AAEG;;;;"}

package/fesm2022/ngwr-blur-text.mjs

@@ -0,0 +1,181 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, computed, inject, ElementRef, 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 BlurText effect by David Haz / reactbits.dev.
+ * Original: https://www.reactbits.dev/text-animations/blur-text
+ *
+ * The reactbits version uses `motion/react` (framer-motion successor).
+ * This port is dependency-free — uses the Web Animations API for the
+ * three-keyframe blur-and-fade-in, triggered by `IntersectionObserver`.
+ */
+function splitPieces(text, unit) {
+    if (!text)
+        return [];
+    if (unit === 'words') {
+        return text.split(/(\s+)/).flatMap(seg => {
+            if (seg.length === 0)
+                return [];
+            if (/^\s+$/.test(seg))
+                return [{ kind: 'space', text: seg }];
+            return [{ kind: 'piece', text: seg }];
+        });
+    }
+    return [...text].map(ch => (/\s/.test(ch) ? { kind: 'space', text: ch } : { kind: 'piece', text: ch }));
+}
+/**
+ * Reveals text by splitting it into chars or words and animating each
+ * piece in from a blurred / offset state through a brief mid-step into
+ * the steady state. Triggers when the host enters the viewport.
+ *
+ * @example
+ * ```html
+ * <wr-blur-text
+ *   text="Welcome to ngwr"
+ *   animateBy="words"
+ *   direction="top"
+ *   [delay]="120"
+ *   [stepDuration]="0.4"
+ * />
+ * ```
+ *
+ * @see https://www.reactbits.dev/text-animations/blur-text
+ */
+class WrBlurText {
+    /** Text to animate. Required. */
+    text = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Split granularity. @default 'words' */
+    animateBy = input('words', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animateBy" }] : /* istanbul ignore next */ []));
+    /** Entry direction. `'top'` slides down into place; `'bottom'` slides up. @default 'top' */
+    direction = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Per-piece stagger in ms. @default 200 */
+    delay = input(200, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numAttr(200) });
+    /** Duration of each keyframe step in seconds (total = 2 × stepDuration). @default 0.35 */
+    stepDuration = input(0.35, { ...(ngDevMode ? { debugName: "stepDuration" } : /* istanbul ignore next */ {}), transform: numAttr(0.35) });
+    /** CSS easing function. @default 'linear' (matches reactbits' identity easing) */
+    easing = input('linear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "easing" }] : /* istanbul ignore next */ []));
+    /** `IntersectionObserver.threshold` (0..1). @default 0.1 */
+    threshold = input(0.1, { ...(ngDevMode ? { debugName: "threshold" } : /* istanbul ignore next */ {}), transform: numAttr(0.1) });
+    /** `IntersectionObserver.rootMargin`. @default '0px' */
+    rootMargin = input('0px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootMargin" }] : /* istanbul ignore next */ []));
+    /** Emitted once all pieces finish animating. */
+    animationComplete = output();
+    pieces = computed(() => splitPieces(this.text(), this.animateBy()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pieces" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    platform = inject(WrPlatform);
+    hasAnimated = false;
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => this.startObserver());
+        effect(() => {
+            this.text();
+            this.animateBy();
+            this.hasAnimated = false;
+            queueMicrotask(() => this.startObserver());
+        });
+    }
+    startObserver() {
+        if (this.hasAnimated)
+            return;
+        const host = this.host.nativeElement;
+        const io = new IntersectionObserver((entries, obs) => {
+            for (const e of entries) {
+                if (e.isIntersecting) {
+                    obs.disconnect();
+                    this.animate();
+                    break;
+                }
+            }
+        }, { threshold: this.threshold(), rootMargin: this.rootMargin() });
+        io.observe(host);
+        this.destroyRef.onDestroy(() => io.disconnect());
+    }
+    animate() {
+        if (this.hasAnimated)
+            return;
+        this.hasAnimated = true;
+        // Reduced motion: pieces already render clear and in place — skip
+        // the blur tween and report completion right away.
+        if (this.platform.prefersReducedMotion()) {
+            this.animationComplete.emit();
+            return;
+        }
+        const targets = this.host.nativeElement.querySelectorAll('.wr-blur-text__piece');
+        if (targets.length === 0) {
+            this.animationComplete.emit();
+            return;
+        }
+        const dir = this.direction();
+        const stepMs = this.stepDuration() * 1000;
+        const totalMs = stepMs * 2;
+        const stagger = this.delay();
+        const easing = this.easing();
+        // Three-keyframe shape per reactbits:
+        //   0    → fully blurred, offset, transparent
+        //   50%  → half-blur, half-opacity, small reverse offset
+        //   100% → clear, opaque, at rest
+        const startY = dir === 'top' ? -50 : 50;
+        const midY = dir === 'top' ? 5 : -5;
+        const keyframes = [
+            { opacity: 0, filter: 'blur(10px)', transform: `translate3d(0, ${startY}px, 0)` },
+            { opacity: 0.5, filter: 'blur(5px)', transform: `translate3d(0, ${midY}px, 0)`, offset: 0.5 },
+            { opacity: 1, filter: 'blur(0px)', transform: 'translate3d(0, 0, 0)' },
+        ];
+        let remaining = targets.length;
+        targets.forEach((el, i) => {
+            el.style.opacity = '0';
+            el.style.filter = 'blur(10px)';
+            el.style.transform = `translate3d(0, ${startY}px, 0)`;
+            const animation = el.animate(keyframes, {
+                duration: totalMs,
+                delay: i * stagger,
+                easing,
+                fill: 'forwards',
+            });
+            animation.onfinish = () => {
+                el.style.opacity = '1';
+                el.style.filter = 'blur(0px)';
+                el.style.transform = 'translate3d(0, 0, 0)';
+                try {
+                    animation.cancel();
+                }
+                catch {
+                    /* noop */
+                }
+                remaining -= 1;
+                if (remaining === 0)
+                    this.animationComplete.emit();
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrBlurText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrBlurText, isStandalone: true, selector: "wr-blur-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, animateBy: { classPropertyName: "animateBy", publicName: "animateBy", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, stepDuration: { classPropertyName: "stepDuration", publicName: "stepDuration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { animationComplete: "animationComplete" }, host: { classAttribute: "wr-blur-text" }, ngImport: i0, template: "@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-blur-text{display:inline-flex;flex-wrap:wrap}.wr-blur-text__piece{display:inline-block;will-change:transform,filter,opacity}.wr-blur-text__space{display:inline;white-space:pre}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrBlurText, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-blur-text', encapsulation: ViewEncapsulation.None, host: { class: 'wr-blur-text' }, template: "@for (p of pieces(); track $index) {\n  @if (p.kind === 'piece') {\n    <span class=\"wr-blur-text__piece\">{{ p.text }}</span>\n  } @else {\n    <span class=\"wr-blur-text__space\">{{ p.text }}</span>\n  }\n}\n", styles: [".wr-blur-text{display:inline-flex;flex-wrap:wrap}.wr-blur-text__piece{display:inline-block;will-change:transform,filter,opacity}.wr-blur-text__space{display:inline;white-space:pre}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], animateBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateBy", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], stepDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepDuration", required: false }] }], easing: [{ type: i0.Input, args: [{ isSignal: true, alias: "easing", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], rootMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootMargin", required: false }] }], animationComplete: [{ type: i0.Output, args: ["animationComplete"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrBlurText };
+//# sourceMappingURL=ngwr-blur-text.mjs.map

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

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

package/fesm2022/ngwr-border-glow.mjs

@@ -0,0 +1,278 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, DestroyRef, PLATFORM_ID, computed, 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
+ *
+ * Port of the reactbits.dev BorderGlow effect — a cursor-tracked cone of
+ * mesh-gradient light that follows the pointer along the card's perimeter,
+ * with an outer halo and optional auto-sweep on mount.
+ */
+const RADIANS_TO_DEG = 180 / Math.PI;
+function parseHsl(input) {
+    const match = /([\d.]+)\s*([\d.]+)%?\s*([\d.]+)%?/.exec(input);
+    if (!match)
+        return { h: 40, s: 80, l: 80 };
+    return { h: Number.parseFloat(match[1]), s: Number.parseFloat(match[2]), l: Number.parseFloat(match[3]) };
+}
+const GLOW_OPACITY_STEPS = [100, 60, 50, 40, 30, 20, 10];
+const GLOW_VAR_SUFFIXES = ['', '-60', '-50', '-40', '-30', '-20', '-10'];
+const GRADIENT_POSITIONS = ['80% 55%', '69% 34%', '8% 6%', '41% 38%', '86% 85%', '82% 18%', '51% 4%'];
+const GRADIENT_VAR_NAMES = [
+    '--wr-border-glow-gradient-one',
+    '--wr-border-glow-gradient-two',
+    '--wr-border-glow-gradient-three',
+    '--wr-border-glow-gradient-four',
+    '--wr-border-glow-gradient-five',
+    '--wr-border-glow-gradient-six',
+    '--wr-border-glow-gradient-seven',
+];
+const GRADIENT_COLOR_INDEX = [0, 1, 2, 0, 1, 2, 1];
+const DEFAULT_COLORS = ['#c084fc', '#f472b6', '#38bdf8'];
+function buildGlowVars(glowColor, intensity) {
+    const { h, s, l } = parseHsl(glowColor);
+    const base = `${h}deg ${s}% ${l}%`;
+    const out = {};
+    for (let i = 0; i < GLOW_OPACITY_STEPS.length; i++) {
+        const alpha = Math.min(GLOW_OPACITY_STEPS[i] * intensity, 100);
+        out[`--wr-border-glow-color${GLOW_VAR_SUFFIXES[i]}`] = `hsl(${base} / ${alpha}%)`;
+    }
+    return out;
+}
+function buildGradientVars(colors) {
+    const out = {};
+    const palette = colors.length > 0 ? colors : DEFAULT_COLORS;
+    for (let i = 0; i < GRADIENT_VAR_NAMES.length; i++) {
+        const colour = palette[Math.min(GRADIENT_COLOR_INDEX[i], palette.length - 1)];
+        out[GRADIENT_VAR_NAMES[i]] = `radial-gradient(at ${GRADIENT_POSITIONS[i]}, ${colour} 0px, transparent 50%)`;
+    }
+    out['--wr-border-glow-gradient-base'] = `linear-gradient(${palette[0]} 0 100%)`;
+    return out;
+}
+/** Tiny rAF-driven tweener. Returns a cancel function so callers can clean up on destroy. */
+function animateValue(opts) {
+    const { start = 0, end = 100, duration = 1000, delay = 0, ease = (t) => t, onUpdate, onEnd } = opts;
+    let raf = 0;
+    let cancelled = false;
+    const startAt = performance.now() + delay;
+    const tick = () => {
+        if (cancelled)
+            return;
+        const elapsed = performance.now() - startAt;
+        const t = Math.min(Math.max(elapsed / duration, 0), 1);
+        onUpdate(start + (end - start) * ease(t));
+        if (t < 1)
+            raf = requestAnimationFrame(tick);
+        else if (onEnd)
+            onEnd();
+    };
+    const timer = setTimeout(() => {
+        raf = requestAnimationFrame(tick);
+    }, delay);
+    return () => {
+        cancelled = true;
+        clearTimeout(timer);
+        cancelAnimationFrame(raf);
+    };
+}
+/**
+ * Cursor-tracked glowing border card. A cone of light follows the pointer
+ * along the card's perimeter, brightening as the cursor approaches an edge.
+ *
+ * - Outer halo via stacked `box-shadow` on an inner `.edge-light` element.
+ * - Inner "soft bloom" via `mix-blend-mode: soft-light` for content near the
+ *   edges (subtle; control via `[fillOpacity]`).
+ * - Optional `[animated]` mode performs a one-shot sweep on mount, useful
+ *   for drawing attention to a freshly-rendered card.
+ *
+ * @example
+ * ```html
+ * <wr-border-glow [animated]="true" [colors]="['#c084fc', '#f472b6', '#38bdf8']">
+ *   <h3>Hover me</h3>
+ *   <p>The border lights up where the cursor is.</p>
+ * </wr-border-glow>
+ * ```
+ *
+ * @see https://www.reactbits.dev/components/border-glow (visual reference)
+ */
+class WrBorderGlow {
+    /** Card background fill. When unset, uses the theme surface token. */
+    backgroundColor = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
+    /** Corner radius in pixels. @default 28 */
+    borderRadius = input(28, { ...(ngDevMode ? { debugName: "borderRadius" } : /* istanbul ignore next */ {}), transform: numAttr(28) });
+    /** Halo extent in pixels — how far the outer glow reaches past the card edge. @default 40 */
+    glowRadius = input(40, { ...(ngDevMode ? { debugName: "glowRadius" } : /* istanbul ignore next */ {}), transform: numAttr(40) });
+    /** Halo opacity multiplier (1 = full strength). @default 1 */
+    glowIntensity = input(1, { ...(ngDevMode ? { debugName: "glowIntensity" } : /* istanbul ignore next */ {}), transform: numAttr(1) });
+    /** Width of the lit cone as a percentage of the perimeter. @default 25 */
+    coneSpread = input(25, { ...(ngDevMode ? { debugName: "coneSpread" } : /* istanbul ignore next */ {}), transform: numAttr(25) });
+    /** How sharply the halo fades as the cursor leaves the edge. Lower = wider falloff. @default 30 */
+    edgeSensitivity = input(30, { ...(ngDevMode ? { debugName: "edgeSensitivity" } : /* istanbul ignore next */ {}), transform: numAttr(30) });
+    /** Strength of the soft-light interior fill near edges. @default 0.5 */
+    fillOpacity = input(0.5, { ...(ngDevMode ? { debugName: "fillOpacity" } : /* istanbul ignore next */ {}), transform: numAttr(0.5) });
+    /**
+     * Halo colour as `'H S L'` (HSL parts, no commas). When unset, the theme
+     * decides: a deep amber on light surfaces, pale amber on dark. Note
+     * `glowIntensity` only applies alongside an explicit `glowColor`.
+     */
+    glowColor = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "glowColor" }] : /* istanbul ignore next */ []));
+    /**
+     * Mesh-gradient palette for the colored border slice. When unset, the
+     * theme decides: deep tones on light, pastels on dark.
+     */
+    colors = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+    /** Play a one-shot perimeter sweep on mount, then fade out. @default false */
+    animated = input(false, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    el = inject(ElementRef);
+    platform = inject(WrPlatform);
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Inline CSS variable bag — recomputed when colour / radius / sensitivity inputs change. */
+    cssVars = computed(() => {
+        const vars = {
+            '--wr-border-glow-radius': `${this.borderRadius()}px`,
+            '--wr-border-glow-padding': `${this.glowRadius()}px`,
+            '--wr-border-glow-cone-spread': String(this.coneSpread()),
+            '--wr-border-glow-edge-sensitivity': String(this.edgeSensitivity()),
+            '--wr-border-glow-fill-opacity': String(this.fillOpacity()),
+        };
+        const colors = this.colors();
+        if (colors !== null)
+            Object.assign(vars, buildGradientVars(colors));
+        // Colour vars are written only when set — otherwise the stylesheet's
+        // per-theme defaults (light vs dark) take over.
+        const bg = this.backgroundColor();
+        if (bg !== null)
+            vars['--wr-border-glow-bg'] = bg;
+        const glow = this.glowColor();
+        if (glow !== null)
+            Object.assign(vars, buildGlowVars(glow, this.glowIntensity()));
+        return vars;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cssVars" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Apply the variable bag to the host on every input change. Bind in an
+        // effect rather than `host: { '[style.--foo]': '...' }` so a single
+        // `setProperty` loop handles the lot.
+        effect(() => {
+            const host = this.el.nativeElement;
+            const vars = this.cssVars();
+            for (const [k, v] of Object.entries(vars))
+                host.style.setProperty(k, v);
+        });
+        if (!this.isBrowser)
+            return;
+        // Auto-sweep on mount — fires once when `animated` is true.
+        effect(() => {
+            if (!this.animated())
+                return;
+            this.runAutoSweep();
+        });
+    }
+    /** Pointer-driven update of `--wr-border-glow-angle` + `--wr-border-glow-edge-proximity`. */
+    onPointerMove(event) {
+        const host = this.el.nativeElement;
+        const rect = host.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const cx = rect.width / 2;
+        const cy = rect.height / 2;
+        const dx = x - cx;
+        const dy = y - cy;
+        // `edge-proximity`: 0 at centre, 1 at the perimeter (whichever axis hits first).
+        let edge = 0;
+        if (dx !== 0 || dy !== 0) {
+            const kx = dx === 0 ? Infinity : cx / Math.abs(dx);
+            const ky = dy === 0 ? Infinity : cy / Math.abs(dy);
+            edge = Math.min(Math.max(1 / Math.min(kx, ky), 0), 1);
+        }
+        // `cursor-angle`: 0deg = top, increases clockwise.
+        let angle = 0;
+        if (dx !== 0 || dy !== 0) {
+            angle = Math.atan2(dy, dx) * RADIANS_TO_DEG + 90;
+            if (angle < 0)
+                angle += 360;
+        }
+        host.style.setProperty('--wr-border-glow-edge-proximity', (edge * 100).toFixed(3));
+        host.style.setProperty('--wr-border-glow-angle', `${angle.toFixed(3)}deg`);
+    }
+    /** One-shot perimeter sweep: in → around → out, mirroring the reactbits behaviour. */
+    runAutoSweep() {
+        // Reduced motion: skip the decorative mount sweep. The pointer-driven
+        // glow stays — it maps 1:1 to the cursor with no autonomous motion.
+        if (this.platform.prefersReducedMotion())
+            return;
+        const host = this.el.nativeElement;
+        const ANGLE_START = 110;
+        const ANGLE_END = 465;
+        host.classList.add('wr-border-glow--sweeping');
+        host.style.setProperty('--wr-border-glow-angle', `${ANGLE_START}deg`);
+        const easeOutCubic = (t) => 1 - (1 - t) ** 3;
+        const easeInCubic = (t) => t * t * t;
+        const lerpAngle = (v) => `${(ANGLE_END - ANGLE_START) * (v / 100) + ANGLE_START}deg`;
+        // 1. Ramp edge-proximity up to 100 quickly.
+        const cancelA = animateValue({
+            duration: 500,
+            onUpdate: v => host.style.setProperty('--wr-border-glow-edge-proximity', `${v}`),
+        });
+        // 2. Sweep angle first half (ease-in).
+        const cancelB = animateValue({
+            duration: 1500,
+            end: 50,
+            ease: easeInCubic,
+            onUpdate: v => host.style.setProperty('--wr-border-glow-angle', lerpAngle(v)),
+        });
+        // 3. Sweep angle second half (ease-out).
+        const cancelC = animateValue({
+            delay: 1500,
+            duration: 2250,
+            start: 50,
+            end: 100,
+            ease: easeOutCubic,
+            onUpdate: v => host.style.setProperty('--wr-border-glow-angle', lerpAngle(v)),
+        });
+        // 4. Fade proximity back to 0.
+        const cancelD = animateValue({
+            delay: 2500,
+            duration: 1500,
+            start: 100,
+            end: 0,
+            ease: easeInCubic,
+            onUpdate: v => host.style.setProperty('--wr-border-glow-edge-proximity', `${v}`),
+            onEnd: () => host.classList.remove('wr-border-glow--sweeping'),
+        });
+        this.destroyRef.onDestroy(() => {
+            cancelA();
+            cancelB();
+            cancelC();
+            cancelD();
+            host.classList.remove('wr-border-glow--sweeping');
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrBorderGlow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrBorderGlow, isStandalone: true, selector: "wr-border-glow", inputs: { backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, glowRadius: { classPropertyName: "glowRadius", publicName: "glowRadius", isSignal: true, isRequired: false, transformFunction: null }, glowIntensity: { classPropertyName: "glowIntensity", publicName: "glowIntensity", isSignal: true, isRequired: false, transformFunction: null }, coneSpread: { classPropertyName: "coneSpread", publicName: "coneSpread", isSignal: true, isRequired: false, transformFunction: null }, edgeSensitivity: { classPropertyName: "edgeSensitivity", publicName: "edgeSensitivity", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, glowColor: { classPropertyName: "glowColor", publicName: "glowColor", isSignal: true, isRequired: false, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointermove": "onPointerMove($event)" }, classAttribute: "wr-border-glow" }, ngImport: i0, template: "<span class=\"wr-border-glow__edge\" aria-hidden=\"true\"></span>\n<div class=\"wr-border-glow__inner\">\n  <ng-content />\n</div>\n", styles: [".wr-border-glow{--wr-border-glow-edge-proximity: 0;--wr-border-glow-angle: 45deg;--wr-border-glow-color: hsl(40deg 90% 45% / 100%);--wr-border-glow-color-60: hsl(40deg 90% 45% / 60%);--wr-border-glow-color-50: hsl(40deg 90% 45% / 50%);--wr-border-glow-color-40: hsl(40deg 90% 45% / 40%);--wr-border-glow-color-30: hsl(40deg 90% 45% / 30%);--wr-border-glow-color-20: hsl(40deg 90% 45% / 20%);--wr-border-glow-color-10: hsl(40deg 90% 45% / 10%);--wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 80% 50%) 0px, transparent 50%);--wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 85% 52%) 0px, transparent 50%);--wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 70% 38%) 0px, transparent 50%);--wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 90% 40%) 0px, transparent 50%);--wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 90% 38%) 0px, transparent 50%);--wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(40deg 95% 45%) 0px, transparent 50%);--wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 90% 50%) 0px, transparent 50%);--wr-border-glow-gradient-base: linear-gradient(hsl(262deg 70% 50%) 0 100%);--wr-border-glow-edge-sensitivity: 30;--wr-border-glow-color-sensitivity: calc(var(--wr-border-glow-edge-sensitivity) + 20);--wr-border-glow-radius: 28px;--wr-border-glow-padding: 40px;--wr-border-glow-cone-spread: 25;position:relative;display:grid;border-radius:var(--wr-border-glow-radius);background:var(--wr-border-glow-bg, var(--wr-color-white, #fff));overflow:visible;isolation:isolate;transform:translateZ(.01px);box-shadow:inset 0 0 0 1px var(--wr-border-glow-outline, var(--wr-color-light, rgba(255, 255, 255, .15)))}.wr-border-glow:before,.wr-border-glow:after,.wr-border-glow>.wr-border-glow__edge{content:\"\";position:absolute;inset:0;border-radius:inherit;transition:opacity .25s ease-out;z-index:-1}.wr-border-glow:not(:hover):not(.wr-border-glow--sweeping):before,.wr-border-glow:not(:hover):not(.wr-border-glow--sweeping):after,.wr-border-glow:not(:hover):not(.wr-border-glow--sweeping)>.wr-border-glow__edge{opacity:0;transition:opacity .75s ease-in-out}.wr-border-glow:before{border:1px solid transparent;background:linear-gradient(var(--wr-border-glow-bg, var(--wr-color-white, #fff)) 0 100%) padding-box,linear-gradient(#fff0 0 100%) border-box,var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268, 100%, 76%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349, 100%, 74%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136, 100%, 78%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192, 100%, 64%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186, 100%, 74%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52, 100%, 65%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12, 100%, 72%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) border-box;opacity:calc((var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) / (100 - var(--wr-border-glow-color-sensitivity)));-webkit-mask-image:conic-gradient(from var(--wr-border-glow-angle) at center,black calc(var(--wr-border-glow-cone-spread) * 1%),transparent calc((var(--wr-border-glow-cone-spread) + 15) * 1%),transparent calc((100 - var(--wr-border-glow-cone-spread) - 15) * 1%),black calc((100 - var(--wr-border-glow-cone-spread)) * 1%));mask-image:conic-gradient(from var(--wr-border-glow-angle) at center,black calc(var(--wr-border-glow-cone-spread) * 1%),transparent calc((var(--wr-border-glow-cone-spread) + 15) * 1%),transparent calc((100 - var(--wr-border-glow-cone-spread) - 15) * 1%),black calc((100 - var(--wr-border-glow-cone-spread)) * 1%))}.wr-border-glow:after{border:1px solid transparent;background:var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268, 100%, 76%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349, 100%, 74%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136, 100%, 78%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192, 100%, 64%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186, 100%, 74%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52, 100%, 65%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12, 100%, 72%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;-webkit-mask-image:linear-gradient(to bottom,#000,#000),radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),conic-gradient(from var(--wr-border-glow-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);mask-image:linear-gradient(to bottom,#000,#000),radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),conic-gradient(from var(--wr-border-glow-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);-webkit-mask-composite:source-out,source-over,source-over,source-over,source-over,source-over;mask-composite:subtract,add,add,add,add,add;opacity:calc(var(--wr-border-glow-fill-opacity, .5) * var(--wr-border-glow-fill-scale, .25) * (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) / (100 - var(--wr-border-glow-color-sensitivity)));mix-blend-mode:var(--wr-border-glow-fill-blend, multiply)}.wr-border-glow>.wr-border-glow__edge{inset:calc(var(--wr-border-glow-padding) * -1);pointer-events:none;z-index:1;-webkit-mask-image:conic-gradient(from var(--wr-border-glow-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);mask-image:conic-gradient(from var(--wr-border-glow-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);opacity:calc((var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-edge-sensitivity)) / (100 - var(--wr-border-glow-edge-sensitivity)));mix-blend-mode:var(--wr-border-glow-halo-blend, normal)}.wr-border-glow>.wr-border-glow__edge:before{content:\"\";position:absolute;inset:var(--wr-border-glow-padding);border-radius:inherit;box-shadow:var(--wr-border-glow-edge-shadow, inset 0 0 0 1px var(--wr-border-glow-color, hsl(40, 80%, 80%)), 0 0 1px 0 var(--wr-border-glow-color-60, hsla(40, 80%, 80%, .6)), 0 0 3px 0 var(--wr-border-glow-color-50, hsla(40, 80%, 80%, .5)), 0 0 6px 0 var(--wr-border-glow-color-40, hsla(40, 80%, 80%, .4)), 0 0 15px 0 var(--wr-border-glow-color-30, hsla(40, 80%, 80%, .3)), 0 0 25px 2px var(--wr-border-glow-color-20, hsla(40, 80%, 80%, .2)), 0 0 50px 2px var(--wr-border-glow-color-10, hsla(40, 80%, 80%, .1)))}.wr-border-glow__inner{position:relative;z-index:1;display:flex;flex-direction:column}[data-theme=dark] .wr-border-glow{--wr-border-glow-outline: rgb(255 255 255 / 15%);--wr-border-glow-halo-blend: plus-lighter;--wr-border-glow-fill-blend: soft-light;--wr-border-glow-fill-scale: 1;--wr-border-glow-edge-shadow: inset 0 0 0 1px var(--wr-border-glow-color), inset 0 0 1px 0 var(--wr-border-glow-color-60), inset 0 0 3px 0 var(--wr-border-glow-color-50), inset 0 0 6px 0 var(--wr-border-glow-color-40), inset 0 0 15px 0 var(--wr-border-glow-color-30), inset 0 0 25px 2px var(--wr-border-glow-color-20), inset 0 0 50px 2px var(--wr-border-glow-color-10), 0 0 1px 0 var(--wr-border-glow-color-60), 0 0 3px 0 var(--wr-border-glow-color-50), 0 0 6px 0 var(--wr-border-glow-color-40), 0 0 15px 0 var(--wr-border-glow-color-30), 0 0 25px 2px var(--wr-border-glow-color-20), 0 0 50px 2px var(--wr-border-glow-color-10);--wr-border-glow-color: hsl(40deg 80% 80% / 100%);--wr-border-glow-color-60: hsl(40deg 80% 80% / 60%);--wr-border-glow-color-50: hsl(40deg 80% 80% / 50%);--wr-border-glow-color-40: hsl(40deg 80% 80% / 40%);--wr-border-glow-color-30: hsl(40deg 80% 80% / 30%);--wr-border-glow-color-20: hsl(40deg 80% 80% / 20%);--wr-border-glow-color-10: hsl(40deg 80% 80% / 10%);--wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%);--wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%);--wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%);--wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%);--wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%);--wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%);--wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%);--wr-border-glow-gradient-base: linear-gradient(#c299ff 0 100%)}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrBorderGlow, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-border-glow', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'wr-border-glow',
+                        '(pointermove)': 'onPointerMove($event)',
+                    }, template: "<span class=\"wr-border-glow__edge\" aria-hidden=\"true\"></span>\n<div class=\"wr-border-glow__inner\">\n  <ng-content />\n</div>\n", styles: [".wr-border-glow{--wr-border-glow-edge-proximity: 0;--wr-border-glow-angle: 45deg;--wr-border-glow-color: hsl(40deg 90% 45% / 100%);--wr-border-glow-color-60: hsl(40deg 90% 45% / 60%);--wr-border-glow-color-50: hsl(40deg 90% 45% / 50%);--wr-border-glow-color-40: hsl(40deg 90% 45% / 40%);--wr-border-glow-color-30: hsl(40deg 90% 45% / 30%);--wr-border-glow-color-20: hsl(40deg 90% 45% / 20%);--wr-border-glow-color-10: hsl(40deg 90% 45% / 10%);--wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 80% 50%) 0px, transparent 50%);--wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 85% 52%) 0px, transparent 50%);--wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 70% 38%) 0px, transparent 50%);--wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 90% 40%) 0px, transparent 50%);--wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 90% 38%) 0px, transparent 50%);--wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(40deg 95% 45%) 0px, transparent 50%);--wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 90% 50%) 0px, transparent 50%);--wr-border-glow-gradient-base: linear-gradient(hsl(262deg 70% 50%) 0 100%);--wr-border-glow-edge-sensitivity: 30;--wr-border-glow-color-sensitivity: calc(var(--wr-border-glow-edge-sensitivity) + 20);--wr-border-glow-radius: 28px;--wr-border-glow-padding: 40px;--wr-border-glow-cone-spread: 25;position:relative;display:grid;border-radius:var(--wr-border-glow-radius);background:var(--wr-border-glow-bg, var(--wr-color-white, #fff));overflow:visible;isolation:isolate;transform:translateZ(.01px);box-shadow:inset 0 0 0 1px var(--wr-border-glow-outline, var(--wr-color-light, rgba(255, 255, 255, .15)))}.wr-border-glow:before,.wr-border-glow:after,.wr-border-glow>.wr-border-glow__edge{content:\"\";position:absolute;inset:0;border-radius:inherit;transition:opacity .25s ease-out;z-index:-1}.wr-border-glow:not(:hover):not(.wr-border-glow--sweeping):before,.wr-border-glow:not(:hover):not(.wr-border-glow--sweeping):after,.wr-border-glow:not(:hover):not(.wr-border-glow--sweeping)>.wr-border-glow__edge{opacity:0;transition:opacity .75s ease-in-out}.wr-border-glow:before{border:1px solid transparent;background:linear-gradient(var(--wr-border-glow-bg, var(--wr-color-white, #fff)) 0 100%) padding-box,linear-gradient(#fff0 0 100%) border-box,var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268, 100%, 76%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349, 100%, 74%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136, 100%, 78%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192, 100%, 64%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186, 100%, 74%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52, 100%, 65%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12, 100%, 72%) 0px, transparent 50%)) border-box,var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) border-box;opacity:calc((var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) / (100 - var(--wr-border-glow-color-sensitivity)));-webkit-mask-image:conic-gradient(from var(--wr-border-glow-angle) at center,black calc(var(--wr-border-glow-cone-spread) * 1%),transparent calc((var(--wr-border-glow-cone-spread) + 15) * 1%),transparent calc((100 - var(--wr-border-glow-cone-spread) - 15) * 1%),black calc((100 - var(--wr-border-glow-cone-spread)) * 1%));mask-image:conic-gradient(from var(--wr-border-glow-angle) at center,black calc(var(--wr-border-glow-cone-spread) * 1%),transparent calc((var(--wr-border-glow-cone-spread) + 15) * 1%),transparent calc((100 - var(--wr-border-glow-cone-spread) - 15) * 1%),black calc((100 - var(--wr-border-glow-cone-spread)) * 1%))}.wr-border-glow:after{border:1px solid transparent;background:var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268, 100%, 76%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349, 100%, 74%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136, 100%, 78%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192, 100%, 64%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186, 100%, 74%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52, 100%, 65%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12, 100%, 72%) 0px, transparent 50%)) padding-box,var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;-webkit-mask-image:linear-gradient(to bottom,#000,#000),radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),conic-gradient(from var(--wr-border-glow-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);mask-image:linear-gradient(to bottom,#000,#000),radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),conic-gradient(from var(--wr-border-glow-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);-webkit-mask-composite:source-out,source-over,source-over,source-over,source-over,source-over;mask-composite:subtract,add,add,add,add,add;opacity:calc(var(--wr-border-glow-fill-opacity, .5) * var(--wr-border-glow-fill-scale, .25) * (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) / (100 - var(--wr-border-glow-color-sensitivity)));mix-blend-mode:var(--wr-border-glow-fill-blend, multiply)}.wr-border-glow>.wr-border-glow__edge{inset:calc(var(--wr-border-glow-padding) * -1);pointer-events:none;z-index:1;-webkit-mask-image:conic-gradient(from var(--wr-border-glow-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);mask-image:conic-gradient(from var(--wr-border-glow-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);opacity:calc((var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-edge-sensitivity)) / (100 - var(--wr-border-glow-edge-sensitivity)));mix-blend-mode:var(--wr-border-glow-halo-blend, normal)}.wr-border-glow>.wr-border-glow__edge:before{content:\"\";position:absolute;inset:var(--wr-border-glow-padding);border-radius:inherit;box-shadow:var(--wr-border-glow-edge-shadow, inset 0 0 0 1px var(--wr-border-glow-color, hsl(40, 80%, 80%)), 0 0 1px 0 var(--wr-border-glow-color-60, hsla(40, 80%, 80%, .6)), 0 0 3px 0 var(--wr-border-glow-color-50, hsla(40, 80%, 80%, .5)), 0 0 6px 0 var(--wr-border-glow-color-40, hsla(40, 80%, 80%, .4)), 0 0 15px 0 var(--wr-border-glow-color-30, hsla(40, 80%, 80%, .3)), 0 0 25px 2px var(--wr-border-glow-color-20, hsla(40, 80%, 80%, .2)), 0 0 50px 2px var(--wr-border-glow-color-10, hsla(40, 80%, 80%, .1)))}.wr-border-glow__inner{position:relative;z-index:1;display:flex;flex-direction:column}[data-theme=dark] .wr-border-glow{--wr-border-glow-outline: rgb(255 255 255 / 15%);--wr-border-glow-halo-blend: plus-lighter;--wr-border-glow-fill-blend: soft-light;--wr-border-glow-fill-scale: 1;--wr-border-glow-edge-shadow: inset 0 0 0 1px var(--wr-border-glow-color), inset 0 0 1px 0 var(--wr-border-glow-color-60), inset 0 0 3px 0 var(--wr-border-glow-color-50), inset 0 0 6px 0 var(--wr-border-glow-color-40), inset 0 0 15px 0 var(--wr-border-glow-color-30), inset 0 0 25px 2px var(--wr-border-glow-color-20), inset 0 0 50px 2px var(--wr-border-glow-color-10), 0 0 1px 0 var(--wr-border-glow-color-60), 0 0 3px 0 var(--wr-border-glow-color-50), 0 0 6px 0 var(--wr-border-glow-color-40), 0 0 15px 0 var(--wr-border-glow-color-30), 0 0 25px 2px var(--wr-border-glow-color-20), 0 0 50px 2px var(--wr-border-glow-color-10);--wr-border-glow-color: hsl(40deg 80% 80% / 100%);--wr-border-glow-color-60: hsl(40deg 80% 80% / 60%);--wr-border-glow-color-50: hsl(40deg 80% 80% / 50%);--wr-border-glow-color-40: hsl(40deg 80% 80% / 40%);--wr-border-glow-color-30: hsl(40deg 80% 80% / 30%);--wr-border-glow-color-20: hsl(40deg 80% 80% / 20%);--wr-border-glow-color-10: hsl(40deg 80% 80% / 10%);--wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%);--wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%);--wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%);--wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%);--wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%);--wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%);--wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%);--wr-border-glow-gradient-base: linear-gradient(#c299ff 0 100%)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], glowRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "glowRadius", required: false }] }], glowIntensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "glowIntensity", required: false }] }], coneSpread: [{ type: i0.Input, args: [{ isSignal: true, alias: "coneSpread", required: false }] }], edgeSensitivity: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeSensitivity", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], glowColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "glowColor", required: false }] }], colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrBorderGlow };
+//# sourceMappingURL=ngwr-border-glow.mjs.map