ngwr 14.7.0 → 14.8.0

package/fesm2022/ngwr-sparkline.mjs

@@ -1,6 +1,7 @@
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, Component } from '@angular/core';
+import { input, viewChild, computed, ViewEncapsulation, Component } from '@angular/core';
+import { useChartTooltip } from 'ngwr/popover';
 
 /**
  * @license
@@ -49,16 +50,31 @@ class WrSparkline {
     /** CSS height. @default '2rem' */
     height = input('2rem', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /**
+     * Show a tooltip with the value of the point nearest the pointer, marking that
+     * point, and named by `ariaLabel` when one is given. Pointer only. @default true
+     */
+    tooltip = input(true, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    svg = viewChild('svg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []));
+    marker = viewChild('marker', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marker" }] : /* istanbul ignore next */ []));
     // Drawn in a 100×40 viewBox — scales smoothly to any CSS size.
     vbW = 100;
     vbH = 40;
     padding = 2;
+    /**
+     * The data as drawn. Non-finite values are dropped rather than scaled: every
+     * `min`/`max` comparison against a NaN is false, so it survived into the scale and
+     * `toFixed(2)` wrote the literal text `NaN` into the path `d` — invalid geometry,
+     * and the line vanishes. The tooltip reads this list too, so the value it shows is
+     * the one under the point it marks.
+     */
+    values = computed(() => this.data().filter(v => Number.isFinite(v)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
     /** Mapped `{ x, y }` points for the path. */
     points = computed(() => {
-        // Non-finite data is dropped rather than scaled: every `min`/`max` comparison
-        // against a NaN is false, so it survived into the scale and `toFixed(2)` wrote the
-        // literal text `NaN` into the path `d` — invalid geometry, and the line vanishes.
-        const data = this.data().filter(v => Number.isFinite(v));
+        const data = this.values();
         if (data.length === 0)
             return [];
         if (data.length === 1)
@@ -108,13 +124,71 @@ class WrSparkline {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tipPoint" }] : /* istanbul ignore next */ []));
     viewBox = `0 0 ${this.vbW} ${this.vbH}`;
+    /**
+     * One tooltip, pointing at the hovered point: above its marker, below it when there
+     * is no room. The marker is the anchor element itself, drawn for the point the
+     * tooltip reads — it renders before this runs, since both follow `tip.active()`.
+     *
+     * The chip sits INSIDE the drawing, over the stretch of line above the marker, so the
+     * helper is also told which point any spot over the drawing reads: a pointer scrubbing
+     * along the top of a sparkline would otherwise land on the chip and stop there.
+     */
+    tip = useChartTooltip(this.tooltip, index => {
+        const value = this.values()[index];
+        const marker = this.marker()?.nativeElement;
+        if (value === undefined || !marker)
+            return null;
+        return {
+            datum: { label: this.ariaLabel() ?? undefined, value: String(value), color: this.color() },
+            anchor: marker,
+        };
+    }, (x, y) => {
+        const svg = this.svg()?.nativeElement;
+        if (!svg)
+            return null;
+        const box = svg.getBoundingClientRect();
+        if (x < box.left || x > box.right || y < box.top || y > box.bottom)
+            return null;
+        return this.indexAt(x, box);
+    });
+    /**
+     * The marker's place, as percentages of the box the drawing stretches to. An
+     * element rather than a `<circle>`: the drawing stretches to any box with
+     * `preserveAspectRatio="none"`, which would squash a circle into an ellipse.
+     */
+    markerAt = computed(() => {
+        const index = this.tip.active();
+        const point = index === null ? undefined : this.points()[index];
+        return point ? { x: (point.x / this.vbW) * 100, y: (point.y / this.vbH) * 100 } : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerAt" }] : /* istanbul ignore next */ []));
+    onPointerMove(event) {
+        const index = this.indexAt(event.clientX, event.currentTarget.getBoundingClientRect());
+        if (index !== null)
+            this.tip.enter(index);
+    }
+    /**
+     * The point nearest the pointer, along x only — the points are evenly spaced, so
+     * that is a rounding rather than a search. A box with no width (nothing laid out
+     * yet) answers nothing rather than a NaN index.
+     */
+    indexAt(clientX, box) {
+        const count = this.points().length;
+        if (count === 0 || box.width <= 0)
+            return null;
+        if (count === 1)
+            return 0;
+        const x = ((clientX - box.left) / box.width) * this.vbW;
+        const step = (this.vbW - this.padding * 2) / (count - 1);
+        return Math.min(count - 1, Math.max(0, Math.round((x - this.padding) / step)));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrSparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrSparkline, isStandalone: true, selector: "wr-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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\n  [attr.viewBox]=\"viewBox\"\n  [style.width]=\"width()\"\n  [style.height]=\"height()\"\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\n  preserveAspectRatio=\"none\"\n>\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrSparkline, isStandalone: true, selector: "wr-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-sparkline" }, viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, isSignal: true }, { propertyName: "marker", first: true, predicate: ["marker"], descendants: true, isSignal: true }], ngImport: i0, template: "<svg\n  #svg\n  [attr.viewBox]=\"viewBox\"\n  [style.width]=\"width()\"\n  [style.height]=\"height()\"\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\n  preserveAspectRatio=\"none\"\n  (mousemove)=\"onPointerMove($event)\"\n  (mouseleave)=\"tip.leave($event)\"\n>\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 last) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"last.x\" [attr.cy]=\"last.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n@if (markerAt(); as at) {\n  <span\n    #marker\n    class=\"wr-sparkline__marker\"\n    aria-hidden=\"true\"\n    [style.left.%]=\"at.x\"\n    [style.top.%]=\"at.y\"\n    [style.background]=\"color()\"\n  ></span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrSparkline, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-sparkline', encapsulation: ViewEncapsulation.None, host: { class: 'wr-sparkline' }, template: "<svg\n  [attr.viewBox]=\"viewBox\"\n  [style.width]=\"width()\"\n  [style.height]=\"height()\"\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\n  preserveAspectRatio=\"none\"\n>\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 }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 }] }] } });
+            args: [{ selector: 'wr-sparkline', encapsulation: ViewEncapsulation.None, host: { class: 'wr-sparkline' }, template: "<svg\n  #svg\n  [attr.viewBox]=\"viewBox\"\n  [style.width]=\"width()\"\n  [style.height]=\"height()\"\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\n  preserveAspectRatio=\"none\"\n  (mousemove)=\"onPointerMove($event)\"\n  (mouseleave)=\"tip.leave($event)\"\n>\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 last) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"last.x\" [attr.cy]=\"last.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n@if (markerAt(); as at) {\n  <span\n    #marker\n    class=\"wr-sparkline__marker\"\n    aria-hidden=\"true\"\n    [style.left.%]=\"at.x\"\n    [style.top.%]=\"at.y\"\n    [style.background]=\"color()\"\n  ></span>\n}\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], svg: [{ type: i0.ViewChild, args: ['svg', { isSignal: true }] }], marker: [{ type: i0.ViewChild, args: ['marker', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-sparkline.mjs.map

@@ -1 +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/reference/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  /**\n   * Accessible name. A sparkline usually sits beside the number it summarises, where\n   * announcing it again is noise — so it is `aria-hidden` by default and becomes a\n   * named `role=\"img\"` only when a consumer says what it shows.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  /** Stroke colour. @default `var(--wr-color-primary)` */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /**\n   * Line thickness in CSS pixels — `vector-effect=\"non-scaling-stroke\"` keeps it at\n   * that width whatever the box is stretched to, so it is NOT in viewBox units.\n   * @default 1.5\n   */\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    // Non-finite data is dropped rather than scaled: every `min`/`max` comparison\n    // against a NaN is false, so it survived into the scale and `toFixed(2)` wrote the\n    // literal text `NaN` into the path `d` — invalid geometry, and the line vanishes.\n    const data = this.data().filter(v => Number.isFinite(v));\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 pad = this.padding;\n    const w = this.vbW - pad * 2;\n    const h = this.vbH - pad * 2;\n    // A series with no spread has no shape, and dividing by the old `|| 1` fallback\n    // pinned every point to `pad + h` — the bottom edge — so a steady series at 500\n    // read as rock bottom. Centred instead, which is what a lone datum already does.\n    if (max === min) {\n      return data.map((_, i) => ({ x: pad + (i / (data.length - 1)) * w, y: this.vbH / 2 }));\n    }\n    const span = max - min;\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\n  [attr.viewBox]=\"viewBox\"\n  [style.width]=\"width()\"\n  [style.height]=\"height()\"\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\n  preserveAspectRatio=\"none\"\n>\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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"}
+{"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, type ElementRef, ViewEncapsulation, computed, input, viewChild } from '@angular/core';\n\nimport { useChartTooltip } from 'ngwr/popover';\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/reference/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  /**\n   * Accessible name. A sparkline usually sits beside the number it summarises, where\n   * announcing it again is noise — so it is `aria-hidden` by default and becomes a\n   * named `role=\"img\"` only when a consumer says what it shows.\n   */\n  readonly ariaLabel = input<string | null>(null);\n\n  /** Stroke colour. @default `var(--wr-color-primary)` */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /**\n   * Line thickness in CSS pixels — `vector-effect=\"non-scaling-stroke\"` keeps it at\n   * that width whatever the box is stretched to, so it is NOT in viewBox units.\n   * @default 1.5\n   */\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  /**\n   * Show a tooltip with the value of the point nearest the pointer, marking that\n   * point, and named by `ariaLabel` when one is given. Pointer only. @default true\n   */\n  readonly tooltip = input(true, { transform: coerceBooleanProperty });\n\n  private readonly svg = viewChild<ElementRef<SVGSVGElement>>('svg');\n  private readonly marker = viewChild<ElementRef<HTMLElement>>('marker');\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  /**\n   * The data as drawn. Non-finite values are dropped rather than scaled: every\n   * `min`/`max` comparison against a NaN is false, so it survived into the scale and\n   * `toFixed(2)` wrote the literal text `NaN` into the path `d` — invalid geometry,\n   * and the line vanishes. The tooltip reads this list too, so the value it shows is\n   * the one under the point it marks.\n   */\n  private readonly values = computed(() => this.data().filter(v => Number.isFinite(v)));\n\n  /** Mapped `{ x, y }` points for the path. */\n  protected readonly points = computed(() => {\n    const data = this.values();\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 pad = this.padding;\n    const w = this.vbW - pad * 2;\n    const h = this.vbH - pad * 2;\n    // A series with no spread has no shape, and dividing by the old `|| 1` fallback\n    // pinned every point to `pad + h` — the bottom edge — so a steady series at 500\n    // read as rock bottom. Centred instead, which is what a lone datum already does.\n    if (max === min) {\n      return data.map((_, i) => ({ x: pad + (i / (data.length - 1)) * w, y: this.vbH / 2 }));\n    }\n    const span = max - min;\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  /**\n   * One tooltip, pointing at the hovered point: above its marker, below it when there\n   * is no room. The marker is the anchor element itself, drawn for the point the\n   * tooltip reads — it renders before this runs, since both follow `tip.active()`.\n   *\n   * The chip sits INSIDE the drawing, over the stretch of line above the marker, so the\n   * helper is also told which point any spot over the drawing reads: a pointer scrubbing\n   * along the top of a sparkline would otherwise land on the chip and stop there.\n   */\n  protected readonly tip = useChartTooltip(\n    this.tooltip,\n    index => {\n      const value = this.values()[index];\n      const marker = this.marker()?.nativeElement;\n      if (value === undefined || !marker) return null;\n      return {\n        datum: { label: this.ariaLabel() ?? undefined, value: String(value), color: this.color() },\n        anchor: marker,\n      };\n    },\n    (x, y) => {\n      const svg = this.svg()?.nativeElement;\n      if (!svg) return null;\n      const box = svg.getBoundingClientRect();\n      if (x < box.left || x > box.right || y < box.top || y > box.bottom) return null;\n      return this.indexAt(x, box);\n    }\n  );\n\n  /**\n   * The marker's place, as percentages of the box the drawing stretches to. An\n   * element rather than a `<circle>`: the drawing stretches to any box with\n   * `preserveAspectRatio=\"none\"`, which would squash a circle into an ellipse.\n   */\n  protected readonly markerAt = computed(() => {\n    const index = this.tip.active();\n    const point = index === null ? undefined : this.points()[index];\n    return point ? { x: (point.x / this.vbW) * 100, y: (point.y / this.vbH) * 100 } : null;\n  });\n\n  protected onPointerMove(event: MouseEvent): void {\n    const index = this.indexAt(event.clientX, (event.currentTarget as Element).getBoundingClientRect());\n    if (index !== null) this.tip.enter(index);\n  }\n\n  /**\n   * The point nearest the pointer, along x only — the points are evenly spaced, so\n   * that is a rounding rather than a search. A box with no width (nothing laid out\n   * yet) answers nothing rather than a NaN index.\n   */\n  private indexAt(clientX: number, box: DOMRect): number | null {\n    const count = this.points().length;\n    if (count === 0 || box.width <= 0) return null;\n    if (count === 1) return 0;\n    const x = ((clientX - box.left) / box.width) * this.vbW;\n    const step = (this.vbW - this.padding * 2) / (count - 1);\n    return Math.min(count - 1, Math.max(0, Math.round((x - this.padding) / step)));\n  }\n}\n","<svg\n  #svg\n  [attr.viewBox]=\"viewBox\"\n  [style.width]=\"width()\"\n  [style.height]=\"height()\"\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\n  preserveAspectRatio=\"none\"\n  (mousemove)=\"onPointerMove($event)\"\n  (mouseleave)=\"tip.leave($event)\"\n>\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 last) {\n    <circle class=\"wr-sparkline__tip\" [attr.cx]=\"last.x\" [attr.cy]=\"last.y\" r=\"1.5\" [attr.fill]=\"color()\" />\n  }\n</svg>\n@if (markerAt(); as at) {\n  <span\n    #marker\n    class=\"wr-sparkline__marker\"\n    aria-hidden=\"true\"\n    [style.left.%]=\"at.x\"\n    [style.top.%]=\"at.y\"\n    [style.background]=\"color()\"\n  ></span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-table.mjs

@@ -180,7 +180,7 @@ class WrTableFilter {
         this.selectionChange.emit(this.items().filter(i => i.selected));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrTableFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrTableFilter, isStandalone: true, selector: "wr-table-filter", inputs: { filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, noMatchesLabel: { classPropertyName: "noMatchesLabel", publicName: "noMatchesLabel", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" [attr.aria-label]=\"resolvedFilterLabel()\">\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      [placeholder]=\"resolvedSearchLabel()\"\n      [attr.aria-label]=\"resolvedSearchLabel()\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n      (keydown)=\"onSearchKeydown($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">{{ resolvedNoMatchesLabel() }}</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">{{ resolvedResetLabel() }}</button>\n    }\n  </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "directive", type: WrDropdown, selector: "[wrDropdown]", inputs: ["wrDropdown", "trigger", "position", "responsive"], outputs: ["opened", "closed"], exportAs: ["wrDropdown"] }, { kind: "component", type: WrDropdownMenu, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrTableFilter, isStandalone: true, selector: "wr-table-filter", inputs: { filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, noMatchesLabel: { classPropertyName: "noMatchesLabel", publicName: "noMatchesLabel", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, resetLabel: { classPropertyName: "resetLabel", publicName: "resetLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button type=\"button\" class=\"wr-table-filter__trigger\" [wrDropdown]=\"menu\" [attr.aria-label]=\"resolvedFilterLabel()\">\n  <svg\n    class=\"wr-icon__svg\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z\"\n    />\n  </svg>\n  @if (selectedCount() > 0) {\n    <span class=\"wr-table-filter__count\">{{ selectedCount() }}</span>\n  }\n</button>\n\n<wr-dropdown-menu #menu>\n  <div class=\"wr-table-filter__panel\">\n    <input\n      class=\"wr-table-filter__search\"\n      type=\"search\"\n      [placeholder]=\"resolvedSearchLabel()\"\n      [attr.aria-label]=\"resolvedSearchLabel()\"\n      [value]=\"query()\"\n      (input)=\"onSearchInput($event)\"\n      (keydown)=\"onSearchKeydown($event)\"\n    />\n\n    <div class=\"wr-table-filter__list\">\n      @for (item of visible(); track item.value) {\n        <button\n          type=\"button\"\n          class=\"wr-table-filter__item\"\n          [class.wr-table-filter__item--selected]=\"item.selected\"\n          (click)=\"onToggle(item)\"\n        >\n          <span class=\"wr-table-filter__check\">\n            <svg\n              class=\"wr-icon__svg\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M20 6 9 17l-5-5\" />\n            </svg>\n          </span>\n          <span class=\"wr-table-filter__title\">{{ item.title }}</span>\n        </button>\n      } @empty {\n        <div class=\"wr-table-filter__empty\">{{ resolvedNoMatchesLabel() }}</div>\n      }\n    </div>\n\n    @if (selectedCount() > 0) {\n      <button type=\"button\" class=\"wr-table-filter__reset\" (click)=\"onReset()\">{{ resolvedResetLabel() }}</button>\n    }\n  </div>\n</wr-dropdown-menu>\n", dependencies: [{ kind: "directive", type: WrDropdown, selector: "[wrDropdown]", inputs: ["wrDropdown", "trigger", "position", "arrow", "responsive"], outputs: ["opened", "closed"], exportAs: ["wrDropdown"] }, { kind: "component", type: WrDropdownMenu, selector: "wr-dropdown-menu", exportAs: ["wrDropdownMenu"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrTableFilter, decorators: [{
             type: Component,