ngwr 6.0.0 → 7.0.0

package/fesm2022/ngwr-skeleton.mjs

@@ -1,49 +1,74 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding } from '@angular/core';
+import { input, computed, ViewEncapsulation, Component } from '@angular/core';
 
-class WrSkeletonComponent {
-    constructor() {
-        this.color = 'dark';
-        this.animated = true;
-    }
-    get elClasses() {
-        return {
-            'wr-skeleton': true,
-            'wr-skeleton--animated': this.animated,
-            'wr-skeleton--primary': this.color === 'primary',
-            'wr-skeleton--secondary': this.color === 'secondary',
-            'wr-skeleton--success': this.color === 'success',
-            'wr-skeleton--warning': this.color === 'warning',
-            'wr-skeleton--danger': this.color === 'danger',
-            'wr-skeleton--light': this.color === 'light',
-            'wr-skeleton--medium': this.color === 'medium',
-            'wr-skeleton--dark': this.color === 'dark',
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: WrSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.1.5", type: WrSkeletonComponent, isStandalone: true, selector: "wr-skeleton", inputs: { color: "color", animated: ["animated", "animated", booleanAttribute] }, host: { properties: { "class": "this.elClasses" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+/**
+ * @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
+ */
+/**
+ * Placeholder block shown while content is loading.
+ *
+ * Default sizing fills the parent width and matches the surrounding
+ * text height (`1lh`). Override `--wr-skeleton-height` / `width` on the
+ * host for custom shapes.
+ *
+ * @example
+ * ```html
+ * <wr-skeleton />
+ * <wr-skeleton color="primary" [animated]="false" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/skeleton
+ */
+class WrSkeleton {
+    /**
+     * Color tint for the placeholder.
+     *
+     * Default is `'light'` because it's theme-stable — the `light` token is
+     * slate-300 in light mode (subtle gray on white) and slate-800 in dark
+     * mode (subtle lift on near-black). The `'dark'` value flips to a near-
+     * white wash in dark mode and breaks the placeholder affordance.
+     *
+     * @default 'light'
+     */
+    color = input('light', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the shimmer animation runs.
+     *
+     * @default true
+     */
+    animated = input(true, { ...(ngDevMode ? { debugName: "animated" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    classes = computed(() => {
+        const parts = ['wr-skeleton', `wr-skeleton--${this.color()}`];
+        if (this.animated())
+            parts.push('wr-skeleton--animated');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrSkeleton, isStandalone: true, selector: "wr-skeleton", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, animated: { classPropertyName: "animated", publicName: "animated", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-busy": "true", "aria-live": "polite" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: WrSkeletonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSkeleton, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-skeleton',
                     template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
+                    host: {
+                        'aria-busy': 'true',
+                        'aria-live': 'polite',
+                        '[class]': 'classes()',
+                    },
                 }]
-        }], propDecorators: { color: [{
-                type: Input
-            }], animated: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], elClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], animated: [{ type: i0.Input, args: [{ isSignal: true, alias: "animated", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { WrSkeletonComponent };
+export { WrSkeleton };
 //# sourceMappingURL=ngwr-skeleton.mjs.map

package/fesm2022/ngwr-skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-skeleton.mjs","sources":["../../../projects/lib/skeleton/skeleton.component.ts","../../../projects/lib/skeleton/ngwr-skeleton.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  HostBinding,\n  Input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { SafeAny, WrThemeColor } from 'ngwr/cdk/types';\n\n@Component({\n  selector: 'wr-skeleton',\n  template: '',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class WrSkeletonComponent {\n  @Input() color: WrThemeColor = 'dark';\n  @Input({ transform: booleanAttribute }) animated = true;\n\n  @HostBinding('class')\n  get elClasses(): SafeAny {\n    return {\n      'wr-skeleton': true,\n      'wr-skeleton--animated': this.animated,\n      'wr-skeleton--primary': this.color === 'primary',\n      'wr-skeleton--secondary': this.color === 'secondary',\n      'wr-skeleton--success': this.color === 'success',\n      'wr-skeleton--warning': this.color === 'warning',\n      'wr-skeleton--danger': this.color === 'danger',\n      'wr-skeleton--light': this.color === 'light',\n      'wr-skeleton--medium': this.color === 'medium',\n      'wr-skeleton--dark': this.color === 'dark',\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAiBa,mBAAmB,CAAA;AANhC,IAAA,WAAA,GAAA;QAOW,IAAK,CAAA,KAAA,GAAiB,MAAM;QACG,IAAQ,CAAA,QAAA,GAAG,IAAI;AAiBxD;AAfC,IAAA,IACI,SAAS,GAAA;QACX,OAAO;AACL,YAAA,aAAa,EAAE,IAAI;YACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;AACtC,YAAA,sBAAsB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;AAChD,YAAA,wBAAwB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW;AACpD,YAAA,sBAAsB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;AAChD,YAAA,sBAAsB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;AAChD,YAAA,qBAAqB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;AAC9C,YAAA,oBAAoB,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;AAC5C,YAAA,qBAAqB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;AAC9C,YAAA,mBAAmB,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM;SAC3C;;8GAjBQ,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAEV,gBAAgB,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAN1B,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAID,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAN/B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,EAAE;oBACZ,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACtC,iBAAA;8BAEU,KAAK,EAAA,CAAA;sBAAb;gBACuC,QAAQ,EAAA,CAAA;sBAA/C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBAGlC,SAAS,EAAA,CAAA;sBADZ,WAAW;uBAAC,OAAO;;;ACrBtB;;AAEG;;;;"}
+{"version":3,"file":"ngwr-skeleton.mjs","sources":["../../../projects/lib/skeleton/skeleton.ts","../../../projects/lib/skeleton/ngwr-skeleton.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrColor } from 'ngwr/theme';\n\n/**\n * Placeholder block shown while content is loading.\n *\n * Default sizing fills the parent width and matches the surrounding\n * text height (`1lh`). Override `--wr-skeleton-height` / `width` on the\n * host for custom shapes.\n *\n * @example\n * ```html\n * <wr-skeleton />\n * <wr-skeleton color=\"primary\" [animated]=\"false\" />\n * ```\n *\n * @see https://ngwr.dev/components/skeleton\n */\n@Component({\n  selector: 'wr-skeleton',\n  template: '',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'aria-busy': 'true',\n    'aria-live': 'polite',\n    '[class]': 'classes()',\n  },\n})\nexport class WrSkeleton {\n  /**\n   * Color tint for the placeholder.\n   *\n   * Default is `'light'` because it's theme-stable — the `light` token is\n   * slate-300 in light mode (subtle gray on white) and slate-800 in dark\n   * mode (subtle lift on near-black). The `'dark'` value flips to a near-\n   * white wash in dark mode and breaks the placeholder affordance.\n   *\n   * @default 'light'\n   */\n  readonly color = input<WrColor>('light');\n\n  /**\n   * Whether the shimmer animation runs.\n   *\n   * @default true\n   */\n  readonly animated = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-skeleton', `wr-skeleton--${this.color()}`];\n    if (this.animated()) parts.push('wr-skeleton--animated');\n    return parts.join(' ');\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAAA;;;;;AAKG;AAOH;;;;;;;;;;;;;;AAcG;MAWU,UAAU,CAAA;AACrB;;;;;;;;;AASG;IACM,KAAK,GAAG,KAAK,CAAU,OAAO;8EAAC;AAExC;;;;AAIG;IACM,QAAQ,GAAG,KAAK,CAAC,IAAI,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;AAElD,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,aAAa,EAAE,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE,CAAC;QAC7D,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,uBAAuB,CAAC;AACxD,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;uGAxBS,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,wbARX,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAQD,UAAU,EAAA,UAAA,EAAA,CAAA;kBAVtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,QAAQ,EAAE,EAAE;oBACZ,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACrC,oBAAA,IAAI,EAAE;AACJ,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,WAAW,EAAE,QAAQ;AACrB,wBAAA,SAAS,EAAE,WAAW;AACvB,qBAAA;AACF,iBAAA;;;ACpCD;;AAEG;;;;"}

package/fesm2022/ngwr-slider.mjs

@@ -0,0 +1,234 @@
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { input, signal, computed, viewChild, forwardRef, ViewEncapsulation, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { noop, clamp, round } 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
+ */
+/** Trim float drift from step calculations. */
+/**
+ * Numeric slider with optional dual-thumb range mode.
+ *
+ * Implements `ControlValueAccessor` — works with `[(ngModel)]`,
+ * `formControl`, `formControlName`. The value shape depends on `range`:
+ * `number` (default) or `[number, number]` when `range="true"`.
+ *
+ * Keyboard: ← / → adjust by `step`; ↑ / ↓ same; Shift+arrow by `step × 10`;
+ * Home / End jump to min / max; PageUp / PageDown by `step × 10`.
+ *
+ * @example
+ * ```html
+ * <wr-slider [(ngModel)]="volume" min="0" max="100" step="5" />
+ * <wr-slider [(ngModel)]="range" range min="0" max="1000" step="10" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/slider
+ */
+class WrSlider {
+    /** Lower bound. @default 0 */
+    min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: (v) => coerceNumberProperty(v, 0) });
+    /** Upper bound. @default 100 */
+    max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (v) => coerceNumberProperty(v, 100) });
+    /** Step size for keyboard and drag. @default 1 */
+    step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0.0001, coerceNumberProperty(v, 1)) });
+    /** Render two thumbs and emit `[low, high]`. @default false */
+    range = input(false, { ...(ngDevMode ? { debugName: "range" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Disable interaction. @default false */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Render the current value below the track. @default true */
+    showLabel = input(true, { ...(ngDevMode ? { debugName: "showLabel" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    low = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "low" }] : /* istanbul ignore next */ []));
+    high = signal(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "high" }] : /* istanbul ignore next */ []));
+    disabledFromCva = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledFromCva" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    track = viewChild.required('track');
+    classes = computed(() => {
+        const parts = ['wr-slider'];
+        if (this.range())
+            parts.push('wr-slider--range');
+        if (this.effectiveDisabled())
+            parts.push('wr-slider--disabled');
+        return parts.join(' ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    lowPercent = computed(() => this.percentOf(this.low()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lowPercent" }] : /* istanbul ignore next */ []));
+    highPercent = computed(() => this.percentOf(this.high()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highPercent" }] : /* istanbul ignore next */ []));
+    fillLeft = computed(() => (this.range() ? this.lowPercent() : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillLeft" }] : /* istanbul ignore next */ []));
+    fillWidth = computed(() => this.range() ? this.highPercent() - this.lowPercent() : this.lowPercent(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillWidth" }] : /* istanbul ignore next */ []));
+    label = computed(() => (this.range() ? `${this.low()} – ${this.high()}` : `${this.low()}`), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    onChange = noop;
+    onTouched = noop;
+    // ControlValueAccessor
+    writeValue(v) {
+        if (Array.isArray(v)) {
+            const tuple = v;
+            this.low.set(this.clampToBounds(tuple[0]));
+            this.high.set(this.clampToBounds(tuple[1]));
+        }
+        else if (typeof v === 'number') {
+            this.low.set(this.clampToBounds(v));
+        }
+        else {
+            this.low.set(this.min());
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromCva.set(coerceBooleanProperty(isDisabled));
+    }
+    // Interaction
+    onPointerDown(event, thumb) {
+        if (this.effectiveDisabled())
+            return;
+        event.preventDefault();
+        const target = event.currentTarget;
+        target.setPointerCapture(event.pointerId);
+        const move = (e) => this.updateFromEvent(e, thumb);
+        const up = (e) => {
+            target.releasePointerCapture(e.pointerId);
+            target.removeEventListener('pointermove', move);
+            target.removeEventListener('pointerup', up);
+            this.onTouched();
+        };
+        target.addEventListener('pointermove', move);
+        target.addEventListener('pointerup', up);
+        this.updateFromEvent(event, thumb);
+    }
+    onTrackPointerDown(event) {
+        if (this.effectiveDisabled())
+            return;
+        if (event.target.closest('.wr-slider__thumb'))
+            return;
+        const thumb = this.nearestThumb(event);
+        this.updateFromEvent(event, thumb);
+        this.focusThumb(thumb);
+    }
+    onKey(event, thumb) {
+        if (this.effectiveDisabled())
+            return;
+        const big = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? 10 : 1;
+        const delta = this.step() * big;
+        const current = thumb === 'low' ? this.low() : this.high();
+        let next = null;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+            case 'PageUp':
+                next = current + delta;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+            case 'PageDown':
+                next = current - delta;
+                break;
+            case 'Home':
+                next = this.min();
+                break;
+            case 'End':
+                next = this.max();
+                break;
+        }
+        if (next === null)
+            return;
+        event.preventDefault();
+        this.setThumb(thumb, next);
+        this.emitChange();
+        this.onTouched();
+    }
+    // Internals
+    updateFromEvent(event, thumb) {
+        const rect = this.track().nativeElement.getBoundingClientRect();
+        const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+        const raw = this.min() + ratio * (this.max() - this.min());
+        this.setThumb(thumb, raw);
+        this.emitChange();
+    }
+    nearestThumb(event) {
+        if (!this.range())
+            return 'low';
+        const rect = this.track().nativeElement.getBoundingClientRect();
+        const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
+        const raw = this.min() + ratio * (this.max() - this.min());
+        return Math.abs(raw - this.low()) <= Math.abs(raw - this.high()) ? 'low' : 'high';
+    }
+    focusThumb(thumb) {
+        queueMicrotask(() => {
+            const root = this.track().nativeElement;
+            const el = root.querySelector(`.wr-slider__thumb--${thumb}`);
+            el?.focus();
+        });
+    }
+    setThumb(thumb, raw) {
+        const stepped = this.snap(raw);
+        if (thumb === 'low') {
+            const next = this.range() ? Math.min(stepped, this.high()) : stepped;
+            this.low.set(next);
+        }
+        else {
+            this.high.set(Math.max(stepped, this.low()));
+        }
+    }
+    snap(value) {
+        const stepped = Math.round((value - this.min()) / this.step()) * this.step() + this.min();
+        return this.clampToBounds(round(stepped, 6));
+    }
+    clampToBounds(v) {
+        return clamp(v, this.min(), this.max());
+    }
+    percentOf(v) {
+        const span = this.max() - this.min();
+        if (span <= 0)
+            return 0;
+        return ((v - this.min()) / span) * 100;
+    }
+    emitChange() {
+        const value = this.range() ? [this.low(), this.high()] : this.low();
+        this.onChange(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrSlider, isStandalone: true, selector: "wr-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                // eslint-disable-next-line @angular-eslint/no-forward-ref
+                useExisting: forwardRef(() => WrSlider),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <span class=\"wr-slider__fill\" [style.left.%]=\"fillLeft()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.left.%]=\"lowPercent()\"\n    [disabled]=\"effectiveDisabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.left.%]=\"highPercent()\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-slider', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            // eslint-disable-next-line @angular-eslint/no-forward-ref
+                            useExisting: forwardRef(() => WrSlider),
+                            multi: true,
+                        },
+                    ], template: "<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <span class=\"wr-slider__fill\" [style.left.%]=\"fillLeft()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.left.%]=\"lowPercent()\"\n    [disabled]=\"effectiveDisabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.left.%]=\"highPercent()\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n" }]
+        }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrSlider };
+//# sourceMappingURL=ngwr-slider.mjs.map

package/fesm2022/ngwr-slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-slider.mjs","sources":["../../../projects/lib/slider/slider.ts","../../../projects/lib/slider/slider.html","../../../projects/lib/slider/ngwr-slider.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 type { ElementRef } from '@angular/core';\nimport { Component, ViewEncapsulation, computed, forwardRef, input, signal, viewChild } from '@angular/core';\nimport { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { clamp, noop, round } from 'ngwr/utils';\n\nimport type { WrSliderValue } from './interfaces';\n\n/** Trim float drift from step calculations. */\n\n/**\n * Numeric slider with optional dual-thumb range mode.\n *\n * Implements `ControlValueAccessor` — works with `[(ngModel)]`,\n * `formControl`, `formControlName`. The value shape depends on `range`:\n * `number` (default) or `[number, number]` when `range=\"true\"`.\n *\n * Keyboard: ← / → adjust by `step`; ↑ / ↓ same; Shift+arrow by `step × 10`;\n * Home / End jump to min / max; PageUp / PageDown by `step × 10`.\n *\n * @example\n * ```html\n * <wr-slider [(ngModel)]=\"volume\" min=\"0\" max=\"100\" step=\"5\" />\n * <wr-slider [(ngModel)]=\"range\" range min=\"0\" max=\"1000\" step=\"10\" />\n * ```\n *\n * @see https://ngwr.dev/components/slider\n */\n@Component({\n  selector: 'wr-slider',\n  templateUrl: './slider.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { '[class]': 'classes()' },\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      // eslint-disable-next-line @angular-eslint/no-forward-ref\n      useExisting: forwardRef(() => WrSlider),\n      multi: true,\n    },\n  ],\n})\nexport class WrSlider implements ControlValueAccessor {\n  /** Lower bound. @default 0 */\n  readonly min = input(0, { transform: (v: unknown): number => coerceNumberProperty(v, 0) });\n  /** Upper bound. @default 100 */\n  readonly max = input(100, { transform: (v: unknown): number => coerceNumberProperty(v, 100) });\n  /** Step size for keyboard and drag. @default 1 */\n  readonly step = input(1, { transform: (v: unknown): number => Math.max(0.0001, coerceNumberProperty(v, 1)) });\n  /** Render two thumbs and emit `[low, high]`. @default false */\n  readonly range = input(false, { transform: coerceBooleanProperty });\n  /** Disable interaction. @default false */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n  /** Render the current value below the track. @default true */\n  readonly showLabel = input(true, { transform: coerceBooleanProperty });\n\n  protected readonly low = signal(0);\n  protected readonly high = signal(100);\n  private readonly disabledFromCva = signal(false);\n\n  protected readonly effectiveDisabled = computed(() => this.disabled() || this.disabledFromCva());\n\n  protected readonly track = viewChild.required<ElementRef<HTMLElement>>('track');\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-slider'];\n    if (this.range()) parts.push('wr-slider--range');\n    if (this.effectiveDisabled()) parts.push('wr-slider--disabled');\n    return parts.join(' ');\n  });\n\n  protected readonly lowPercent = computed(() => this.percentOf(this.low()));\n  protected readonly highPercent = computed(() => this.percentOf(this.high()));\n\n  protected readonly fillLeft = computed(() => (this.range() ? this.lowPercent() : 0));\n  protected readonly fillWidth = computed(() =>\n    this.range() ? this.highPercent() - this.lowPercent() : this.lowPercent()\n  );\n\n  protected readonly label = computed(() => (this.range() ? `${this.low()} – ${this.high()}` : `${this.low()}`));\n\n  private onChange: (v: WrSliderValue) => void = noop;\n  private onTouched: () => void = noop;\n\n  // ControlValueAccessor\n\n  writeValue(v: WrSliderValue | null): void {\n    if (Array.isArray(v)) {\n      const tuple = v as readonly [number, number];\n      this.low.set(this.clampToBounds(tuple[0]));\n      this.high.set(this.clampToBounds(tuple[1]));\n    } else if (typeof v === 'number') {\n      this.low.set(this.clampToBounds(v));\n    } else {\n      this.low.set(this.min());\n    }\n  }\n\n  registerOnChange(fn: (v: WrSliderValue) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabledFromCva.set(coerceBooleanProperty(isDisabled));\n  }\n\n  // Interaction\n\n  protected onPointerDown(event: PointerEvent, thumb: 'low' | 'high'): void {\n    if (this.effectiveDisabled()) return;\n    event.preventDefault();\n    const target = event.currentTarget as HTMLElement;\n    target.setPointerCapture(event.pointerId);\n\n    const move = (e: PointerEvent): void => this.updateFromEvent(e, thumb);\n    const up = (e: PointerEvent): void => {\n      target.releasePointerCapture(e.pointerId);\n      target.removeEventListener('pointermove', move);\n      target.removeEventListener('pointerup', up);\n      this.onTouched();\n    };\n\n    target.addEventListener('pointermove', move);\n    target.addEventListener('pointerup', up);\n    this.updateFromEvent(event, thumb);\n  }\n\n  protected onTrackPointerDown(event: PointerEvent): void {\n    if (this.effectiveDisabled()) return;\n    if ((event.target as HTMLElement).closest('.wr-slider__thumb')) return;\n    const thumb = this.nearestThumb(event);\n    this.updateFromEvent(event, thumb);\n    this.focusThumb(thumb);\n  }\n\n  protected onKey(event: KeyboardEvent, thumb: 'low' | 'high'): void {\n    if (this.effectiveDisabled()) return;\n    const big = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? 10 : 1;\n    const delta = this.step() * big;\n    const current = thumb === 'low' ? this.low() : this.high();\n    let next: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n      case 'PageUp':\n        next = current + delta;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n      case 'PageDown':\n        next = current - delta;\n        break;\n      case 'Home':\n        next = this.min();\n        break;\n      case 'End':\n        next = this.max();\n        break;\n    }\n\n    if (next === null) return;\n    event.preventDefault();\n    this.setThumb(thumb, next);\n    this.emitChange();\n    this.onTouched();\n  }\n\n  // Internals\n\n  private updateFromEvent(event: PointerEvent, thumb: 'low' | 'high'): void {\n    const rect = this.track().nativeElement.getBoundingClientRect();\n    const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);\n    const raw = this.min() + ratio * (this.max() - this.min());\n    this.setThumb(thumb, raw);\n    this.emitChange();\n  }\n\n  private nearestThumb(event: PointerEvent): 'low' | 'high' {\n    if (!this.range()) return 'low';\n    const rect = this.track().nativeElement.getBoundingClientRect();\n    const ratio = clamp((event.clientX - rect.left) / rect.width, 0, 1);\n    const raw = this.min() + ratio * (this.max() - this.min());\n    return Math.abs(raw - this.low()) <= Math.abs(raw - this.high()) ? 'low' : 'high';\n  }\n\n  private focusThumb(thumb: 'low' | 'high'): void {\n    queueMicrotask(() => {\n      const root = this.track().nativeElement;\n      const el = root.querySelector<HTMLElement>(`.wr-slider__thumb--${thumb}`);\n      el?.focus();\n    });\n  }\n\n  private setThumb(thumb: 'low' | 'high', raw: number): void {\n    const stepped = this.snap(raw);\n    if (thumb === 'low') {\n      const next = this.range() ? Math.min(stepped, this.high()) : stepped;\n      this.low.set(next);\n    } else {\n      this.high.set(Math.max(stepped, this.low()));\n    }\n  }\n\n  private snap(value: number): number {\n    const stepped = Math.round((value - this.min()) / this.step()) * this.step() + this.min();\n    return this.clampToBounds(round(stepped, 6));\n  }\n\n  private clampToBounds(v: number): number {\n    return clamp(v, this.min(), this.max());\n  }\n\n  private percentOf(v: number): number {\n    const span = this.max() - this.min();\n    if (span <= 0) return 0;\n    return ((v - this.min()) / span) * 100;\n  }\n\n  private emitChange(): void {\n    const value: WrSliderValue = this.range() ? [this.low(), this.high()] : this.low();\n    this.onChange(value);\n  }\n}\n","<div #track class=\"wr-slider__track\" (pointerdown)=\"onTrackPointerDown($event)\">\n  <span class=\"wr-slider__fill\" [style.left.%]=\"fillLeft()\" [style.width.%]=\"fillWidth()\"></span>\n\n  <button\n    type=\"button\"\n    class=\"wr-slider__thumb wr-slider__thumb--low\"\n    role=\"slider\"\n    [style.left.%]=\"lowPercent()\"\n    [disabled]=\"effectiveDisabled()\"\n    [attr.aria-valuemin]=\"min()\"\n    [attr.aria-valuemax]=\"range() ? high() : max()\"\n    [attr.aria-valuenow]=\"low()\"\n    [attr.aria-label]=\"range() ? 'Lower value' : 'Value'\"\n    (pointerdown)=\"onPointerDown($event, 'low')\"\n    (keydown)=\"onKey($event, 'low')\"\n  ></button>\n\n  @if (range()) {\n    <button\n      type=\"button\"\n      class=\"wr-slider__thumb wr-slider__thumb--high\"\n      role=\"slider\"\n      [style.left.%]=\"highPercent()\"\n      [disabled]=\"effectiveDisabled()\"\n      [attr.aria-valuemin]=\"low()\"\n      [attr.aria-valuemax]=\"max()\"\n      [attr.aria-valuenow]=\"high()\"\n      aria-label=\"Upper value\"\n      (pointerdown)=\"onPointerDown($event, 'high')\"\n      (keydown)=\"onKey($event, 'high')\"\n    ></button>\n  }\n</div>\n\n@if (showLabel()) {\n  <div class=\"wr-slider__label\">{{ label() }}</div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAAA;;;;;AAKG;AAWH;AAEA;;;;;;;;;;;;;;;;;AAiBG;MAeU,QAAQ,CAAA;;AAEV,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;;AAEjF,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;;IAErF,IAAI,GAAG,KAAK,CAAC,CAAC,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,MAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,CAAC,CAAU,KAAa,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAA,CAAG;;IAEpG,KAAK,GAAG,KAAK,CAAC,KAAK,6EAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAE1D,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;;IAE7D,SAAS,GAAG,KAAK,CAAC,IAAI,iFAAI,SAAS,EAAE,qBAAqB,EAAA,CAAG;IAEnD,GAAG,GAAG,MAAM,CAAC,CAAC;4EAAC;IACf,IAAI,GAAG,MAAM,CAAC,GAAG;6EAAC;IACpB,eAAe,GAAG,MAAM,CAAC,KAAK;wFAAC;AAE7B,IAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE;0FAAC;AAE7E,IAAA,KAAK,GAAG,SAAS,CAAC,QAAQ,CAA0B,OAAO,CAAC;AAE5D,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AACzC,QAAA,MAAM,KAAK,GAAG,CAAC,WAAW,CAAC;QAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;QAChD,IAAI,IAAI,CAAC,iBAAiB,EAAE;AAAE,YAAA,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC;AAC/D,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;IACxB,CAAC;gFAAC;AAEiB,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;mFAAC;AACvD,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;oFAAC;IAEzD,QAAQ,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;iFAAC;AACjE,IAAA,SAAS,GAAG,QAAQ,CAAC,MACtC,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;kFAC1E;AAEkB,IAAA,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA,GAAA,EAAM,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;8EAAC;IAEtG,QAAQ,GAA+B,IAAI;IAC3C,SAAS,GAAe,IAAI;;AAIpC,IAAA,UAAU,CAAC,CAAuB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;YACpB,MAAM,KAAK,GAAG,CAA8B;AAC5C,YAAA,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1C,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7C;AAAO,aAAA,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACrC;aAAO;YACL,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;QAC1B;IACF;AAEA,IAAA,gBAAgB,CAAC,EAA8B,EAAA;AAC7C,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;QAClC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;IAC7D;;IAIU,aAAa,CAAC,KAAmB,EAAE,KAAqB,EAAA;QAChE,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAAE;QAC9B,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,aAA4B;AACjD,QAAA,MAAM,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC;AAEzC,QAAA,MAAM,IAAI,GAAG,CAAC,CAAe,KAAW,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,CAAC;AACtE,QAAA,MAAM,EAAE,GAAG,CAAC,CAAe,KAAU;AACnC,YAAA,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;AACzC,YAAA,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC;AAC/C,YAAA,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,EAAE,CAAC;YAC3C,IAAI,CAAC,SAAS,EAAE;AAClB,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC;AAC5C,QAAA,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,EAAE,CAAC;AACxC,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC;IACpC;AAEU,IAAA,kBAAkB,CAAC,KAAmB,EAAA;QAC9C,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAAE;AAC9B,QAAA,IAAK,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,mBAAmB,CAAC;YAAE;QAChE,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC;AAClC,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IACxB;IAEU,KAAK,CAAC,KAAoB,EAAE,KAAqB,EAAA;QACzD,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAAE;QAC9B,MAAM,GAAG,GAAG,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,GAAG,EAAE,GAAG,CAAC;QACzF,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,GAAG;AAC/B,QAAA,MAAM,OAAO,GAAG,KAAK,KAAK,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE;QAC1D,IAAI,IAAI,GAAkB,IAAI;AAE9B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,YAAY;AACjB,YAAA,KAAK,SAAS;AACd,YAAA,KAAK,QAAQ;AACX,gBAAA,IAAI,GAAG,OAAO,GAAG,KAAK;gBACtB;AACF,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,UAAU;AACb,gBAAA,IAAI,GAAG,OAAO,GAAG,KAAK;gBACtB;AACF,YAAA,KAAK,MAAM;AACT,gBAAA,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE;gBACjB;AACF,YAAA,KAAK,KAAK;AACR,gBAAA,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE;gBACjB;;QAGJ,IAAI,IAAI,KAAK,IAAI;YAAE;QACnB,KAAK,CAAC,cAAc,EAAE;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC;QAC1B,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,SAAS,EAAE;IAClB;;IAIQ,eAAe,CAAC,KAAmB,EAAE,KAAqB,EAAA;QAChE,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE;QAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QACnE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;AAC1D,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC;QACzB,IAAI,CAAC,UAAU,EAAE;IACnB;AAEQ,IAAA,YAAY,CAAC,KAAmB,EAAA;AACtC,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;AAAE,YAAA,OAAO,KAAK;QAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,qBAAqB,EAAE;QAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QACnE,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;AAC1D,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,MAAM;IACnF;AAEQ,IAAA,UAAU,CAAC,KAAqB,EAAA;QACtC,cAAc,CAAC,MAAK;YAClB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa;YACvC,MAAM,EAAE,GAAG,IAAI,CAAC,aAAa,CAAc,CAAA,mBAAA,EAAsB,KAAK,CAAA,CAAE,CAAC;YACzE,EAAE,EAAE,KAAK,EAAE;AACb,QAAA,CAAC,CAAC;IACJ;IAEQ,QAAQ,CAAC,KAAqB,EAAE,GAAW,EAAA;QACjD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;AAC9B,QAAA,IAAI,KAAK,KAAK,KAAK,EAAE;YACnB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO;AACpE,YAAA,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC;QACpB;aAAO;AACL,YAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9C;IACF;AAEQ,IAAA,IAAI,CAAC,KAAa,EAAA;AACxB,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;QACzF,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC9C;AAEQ,IAAA,aAAa,CAAC,CAAS,EAAA;AAC7B,QAAA,OAAO,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;IACzC;AAEQ,IAAA,SAAS,CAAC,CAAS,EAAA;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;QACpC,IAAI,IAAI,IAAI,CAAC;AAAE,YAAA,OAAO,CAAC;AACvB,QAAA,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,IAAI,IAAI,GAAG;IACxC;IAEQ,UAAU,GAAA;QAChB,MAAM,KAAK,GAAkB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE;AAClF,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;IACtB;uGAxLW,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,EAAA,EAAA,SAAA,EATR;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;;AAE1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,QAAQ,CAAC;AACvC,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,OAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChDH,iuCAqCA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDaa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBAdpB,SAAS;+BACE,WAAW,EAAA,aAAA,EAEN,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B,EAAE,SAAS,EAAE,WAAW,EAAE,EAAA,SAAA,EACrB;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;;AAE1B,4BAAA,WAAW,EAAE,UAAU,CAAC,cAAc,CAAC;AACvC,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,QAAA,EAAA,iuCAAA,EAAA;mmBAsBsE,OAAO,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEtEhF;;AAEG;;;;"}

package/fesm2022/ngwr-sparkline.mjs

@@ -0,0 +1,104 @@
+import { coerceNumberProperty, coerceBooleanProperty } 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
+ */
+/**
+ * Tiny inline trend line. SVG path drawn from `[data]: number[]` — no
+ * axes, no labels, just the shape. Optional area fill + tip dot.
+ *
+ * @example
+ * ```html
+ * <wr-sparkline [data]="[12, 14, 9, 17, 21, 18, 23]" />
+ * <wr-sparkline [data]="prices" [showArea]="true" color="var(--wr-color-success)" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/sparkline
+ */
+class WrSparkline {
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Stroke colour. @default `var(--wr-color-primary)` */
+    color = input('var(--wr-color-primary)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Stroke width in viewBox units. @default 1.5 */
+    strokeWidth = input(1.5, { ...(ngDevMode ? { debugName: "strokeWidth" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0.1, coerceNumberProperty(v, 1.5)) });
+    /** Fill the area below the line. @default false */
+    showArea = input(false, { ...(ngDevMode ? { debugName: "showArea" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Show a dot at the last data point. @default true */
+    showTip = input(true, { ...(ngDevMode ? { debugName: "showTip" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** CSS width. @default '8rem' */
+    width = input('8rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    /** CSS height. @default '2rem' */
+    height = input('2rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    // Drawn in a 100×40 viewBox — scales smoothly to any CSS size.
+    vbW = 100;
+    vbH = 40;
+    padding = 2;
+    /** Mapped `{ x, y }` points for the path. */
+    points = computed(() => {
+        const data = this.data();
+        if (data.length === 0)
+            return [];
+        if (data.length === 1)
+            return [{ x: this.vbW / 2, y: this.vbH / 2 }];
+        let min = data[0];
+        let max = data[0];
+        for (const v of data) {
+            if (v < min)
+                min = v;
+            if (v > max)
+                max = v;
+        }
+        const span = max - min || 1;
+        const pad = this.padding;
+        const w = this.vbW - pad * 2;
+        const h = this.vbH - pad * 2;
+        return data.map((v, i) => ({
+            x: pad + (i / (data.length - 1)) * w,
+            y: pad + h - ((v - min) / span) * h,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
+    linePath = computed(() => this.points()
+        .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`)
+        .join(' '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linePath" }] : /* istanbul ignore next */ []));
+    areaPath = computed(() => {
+        const pts = this.points();
+        if (pts.length < 2)
+            return '';
+        const baseY = this.vbH - this.padding;
+        const start = `M ${pts[0].x.toFixed(2)} ${baseY}`;
+        const line = pts.map(p => `L ${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(' ');
+        const close = `L ${pts[pts.length - 1].x.toFixed(2)} ${baseY} Z`;
+        return `${start} ${line} ${close}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "areaPath" }] : /* istanbul ignore next */ []));
+    tipPoint = computed(() => {
+        const pts = this.points();
+        return pts.length > 0 ? pts[pts.length - 1] : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tipPoint" }] : /* istanbul ignore next */ []));
+    viewBox = `0 0 ${this.vbW} ${this.vbH}`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrSparkline, isStandalone: true, selector: "wr-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showArea: { classPropertyName: "showArea", publicName: "showArea", isSignal: true, isRequired: false, transformFunction: null }, showTip: { classPropertyName: "showTip", publicName: "showTip", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-sparkline" }, ngImport: i0, template: "<svg [attr.viewBox]=\"viewBox\" [style.width]=\"width()\" [style.height]=\"height()\" preserveAspectRatio=\"none\">\n  @if (showArea() && areaPath()) {\n    <path class=\"wr-sparkline__area\" [attr.d]=\"areaPath()\" [attr.fill]=\"color()\" fill-opacity=\"0.15\" stroke=\"none\" />\n  }\n  @if (linePath()) {\n    <path\n      class=\"wr-sparkline__line\"\n      [attr.d]=\"linePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"color()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      vector-effect=\"non-scaling-stroke\"\n    />\n  }\n  @if (showTip() && tipPoint(); as tip) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"tip.x\" [attr.cy]=\"tip.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrSparkline, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-sparkline', encapsulation: ViewEncapsulation.None, host: { class: 'wr-sparkline' }, template: "<svg [attr.viewBox]=\"viewBox\" [style.width]=\"width()\" [style.height]=\"height()\" preserveAspectRatio=\"none\">\n  @if (showArea() && areaPath()) {\n    <path class=\"wr-sparkline__area\" [attr.d]=\"areaPath()\" [attr.fill]=\"color()\" fill-opacity=\"0.15\" stroke=\"none\" />\n  }\n  @if (linePath()) {\n    <path\n      class=\"wr-sparkline__line\"\n      [attr.d]=\"linePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"color()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      vector-effect=\"non-scaling-stroke\"\n    />\n  }\n  @if (showTip() && tipPoint(); as tip) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"tip.x\" [attr.cy]=\"tip.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArea", required: false }] }], showTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTip", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrSparkline };
+//# sourceMappingURL=ngwr-sparkline.mjs.map

package/fesm2022/ngwr-sparkline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-sparkline.mjs","sources":["../../../projects/lib/sparkline/sparkline.ts","../../../projects/lib/sparkline/sparkline.html","../../../projects/lib/sparkline/ngwr-sparkline.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\n/**\n * Tiny inline trend line. SVG path drawn from `[data]: number[]` — no\n * axes, no labels, just the shape. Optional area fill + tip dot.\n *\n * @example\n * ```html\n * <wr-sparkline [data]=\"[12, 14, 9, 17, 21, 18, 23]\" />\n * <wr-sparkline [data]=\"prices\" [showArea]=\"true\" color=\"var(--wr-color-success)\" />\n * ```\n *\n * @see https://ngwr.dev/components/sparkline\n */\n@Component({\n  selector: 'wr-sparkline',\n  templateUrl: './sparkline.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-sparkline' },\n})\nexport class WrSparkline {\n  readonly data = input<readonly number[]>([]);\n\n  /** Stroke colour. @default `var(--wr-color-primary)` */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Stroke width in viewBox units. @default 1.5 */\n  readonly strokeWidth = input(1.5, {\n    transform: (v: unknown): number => Math.max(0.1, coerceNumberProperty(v, 1.5)),\n  });\n\n  /** Fill the area below the line. @default false */\n  readonly showArea = input(false, { transform: coerceBooleanProperty });\n\n  /** Show a dot at the last data point. @default true */\n  readonly showTip = input(true, { transform: coerceBooleanProperty });\n\n  /** CSS width. @default '8rem' */\n  readonly width = input<string>('8rem');\n\n  /** CSS height. @default '2rem' */\n  readonly height = input<string>('2rem');\n\n  // Drawn in a 100×40 viewBox — scales smoothly to any CSS size.\n  private readonly vbW = 100;\n  private readonly vbH = 40;\n  private readonly padding = 2;\n\n  /** Mapped `{ x, y }` points for the path. */\n  protected readonly points = computed(() => {\n    const data = this.data();\n    if (data.length === 0) return [] as readonly { x: number; y: number }[];\n    if (data.length === 1) return [{ x: this.vbW / 2, y: this.vbH / 2 }];\n\n    let min = data[0];\n    let max = data[0];\n    for (const v of data) {\n      if (v < min) min = v;\n      if (v > max) max = v;\n    }\n    const span = max - min || 1;\n    const pad = this.padding;\n    const w = this.vbW - pad * 2;\n    const h = this.vbH - pad * 2;\n    return data.map((v, i) => ({\n      x: pad + (i / (data.length - 1)) * w,\n      y: pad + h - ((v - min) / span) * h,\n    }));\n  });\n\n  protected readonly linePath = computed(() =>\n    this.points()\n      .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`)\n      .join(' ')\n  );\n\n  protected readonly areaPath = computed(() => {\n    const pts = this.points();\n    if (pts.length < 2) return '';\n    const baseY = this.vbH - this.padding;\n    const start = `M ${pts[0].x.toFixed(2)} ${baseY}`;\n    const line = pts.map(p => `L ${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(' ');\n    const close = `L ${pts[pts.length - 1].x.toFixed(2)} ${baseY} Z`;\n    return `${start} ${line} ${close}`;\n  });\n\n  protected readonly tipPoint = computed(() => {\n    const pts = this.points();\n    return pts.length > 0 ? pts[pts.length - 1] : null;\n  });\n\n  protected readonly viewBox = `0 0 ${this.vbW} ${this.vbH}`;\n}\n","<svg [attr.viewBox]=\"viewBox\" [style.width]=\"width()\" [style.height]=\"height()\" preserveAspectRatio=\"none\">\n  @if (showArea() && areaPath()) {\n    <path class=\"wr-sparkline__area\" [attr.d]=\"areaPath()\" [attr.fill]=\"color()\" fill-opacity=\"0.15\" stroke=\"none\" />\n  }\n  @if (linePath()) {\n    <path\n      class=\"wr-sparkline__line\"\n      [attr.d]=\"linePath()\"\n      fill=\"none\"\n      [attr.stroke]=\"color()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      vector-effect=\"non-scaling-stroke\"\n    />\n  }\n  @if (showTip() && tipPoint(); as tip) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"tip.x\" [attr.cy]=\"tip.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}