ng-hub-ui-metrics 22.4.0 → 22.4.2

package/README.md

@@ -15,6 +15,7 @@ This package is part of [Hub UI](https://hubui.dev/en/), a collection of Angular
 - Docs: https://hubui.dev/en/metrics/overview/
 - Live examples: https://hubui.dev/en/metrics/examples/
 - Hub UI: https://hubui.dev/en/
+- Hub UI on GitHub (issues, roadmap and contributing): https://github.com/hub-env/hub-ui
 
 ## 🧩 Library Family `ng-hub-ui`
 

package/fesm2022/ng-hub-ui-metrics.mjs

@@ -250,6 +250,13 @@ class HubRingComponent {
         return Math.min(1, Math.max(0, this.value() / max));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fraction" }] : /* istanbul ignore next */ []));
+    /**
+     * Value announced to assistive technology. The arc paints the clamped ratio, so
+     * reporting the raw input would put `aria-valuenow` outside the range it is
+     * measured against the moment a caller overshoots `max`.
+     */
+    ariaValueNow = computed(() => this.fraction() * this.max(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaValueNow" }] : /* istanbul ignore next */ []));
     /** Completion as a `0..100` percentage. */
     percent = computed(() => this.fraction() * 100, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
@@ -299,7 +306,7 @@ class HubRingComponent {
         return typeof dimension === 'number' ? `${dimension}px` : dimension;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubRingComponent, isStandalone: true, selector: "hub-ring", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "class": "hostClasses()", "style.--hub-ring-size": "sizeCss()", "style.--hub-ring-thickness": "thicknessCss()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "value()", "attr.aria-valuetext": "displayValue()", "attr.aria-label": "label() || null" }, classAttribute: "hub-ring" }, exportAs: ["hubGauge"], ngImport: i0, template: "<svg class=\"hub-ring__svg\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\">\n\t<circle class=\"hub-ring__track\" cx=\"50\" cy=\"50\" r=\"44\" [attr.pathLength]=\"PATH_LENGTH\" />\n\t<circle\n\t\tclass=\"hub-ring__indicator\"\n\t\tcx=\"50\"\n\t\tcy=\"50\"\n\t\tr=\"44\"\n\t\t[attr.pathLength]=\"PATH_LENGTH\"\n\t\t[attr.stroke-dasharray]=\"dashArray()\"\n\t\t[attr.stroke-dashoffset]=\"dashOffset()\"\n\t/>\n</svg>\n\n<span class=\"hub-ring__caption\">\n\t@if (showValue()) {\n\t\t<span class=\"hub-ring__value\">{{ displayValue() }}</span>\n\t}\n\t<ng-content />\n</span>\n", styles: [":where(:host){--hub-ring-size: 4rem;--hub-ring-thickness: var(--hub-ref-space-2, .5rem);--hub-ring-track: color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 20%, transparent);--hub-ring-indicator: var(--hub-sys-color-primary, #0d6efd);--hub-ring-caption-color: var(--hub-sys-text-primary, #212529);--hub-ring-low-color: var(--hub-sys-color-danger, #dc3545);--hub-ring-high-color: var(--hub-sys-color-success, #198754)}:host{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--hub-ring-size);block-size:var(--hub-ring-size)}.hub-ring__svg{inline-size:100%;block-size:100%;transform:rotate(-90deg);overflow:visible}.hub-ring__track,.hub-ring__indicator{fill:none;stroke-width:var(--hub-ring-thickness);stroke-linecap:round}.hub-ring__track{stroke:var(--hub-ring-track)}.hub-ring__indicator{stroke:var(--hub-ring-indicator);transition:stroke-dashoffset .4s ease,stroke .3s ease}.hub-ring__caption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;color:var(--hub-ring-caption-color);text-align:center;line-height:1.1;pointer-events:none}.hub-ring__value{font-size:calc(var(--hub-ring-size) * .24);font-weight:var(--hub-ref-font-weight-semibold, 600);font-variant-numeric:tabular-nums}:host(.hub-ring--low){--hub-ring-indicator: var(--hub-ring-low-color)}:host(.hub-ring--high){--hub-ring-indicator: var(--hub-ring-high-color)}@media(prefers-reduced-motion:reduce){.hub-ring__indicator{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubRingComponent, isStandalone: true, selector: "hub-ring", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "class": "hostClasses()", "style.--hub-ring-size": "sizeCss()", "style.--hub-ring-thickness": "thicknessCss()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "ariaValueNow()", "attr.aria-valuetext": "displayValue()", "attr.aria-label": "label() || null" }, classAttribute: "hub-ring" }, exportAs: ["hubGauge"], ngImport: i0, template: "<svg class=\"hub-ring__svg\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\">\n\t<circle class=\"hub-ring__track\" cx=\"50\" cy=\"50\" r=\"44\" [attr.pathLength]=\"PATH_LENGTH\" />\n\t<circle\n\t\tclass=\"hub-ring__indicator\"\n\t\tcx=\"50\"\n\t\tcy=\"50\"\n\t\tr=\"44\"\n\t\t[attr.pathLength]=\"PATH_LENGTH\"\n\t\t[attr.stroke-dasharray]=\"dashArray()\"\n\t\t[attr.stroke-dashoffset]=\"dashOffset()\"\n\t/>\n</svg>\n\n<span class=\"hub-ring__caption\">\n\t@if (showValue()) {\n\t\t<span class=\"hub-ring__value\">{{ displayValue() }}</span>\n\t}\n\t<ng-content />\n</span>\n", styles: [":where(:host){--hub-ring-size: 4rem;--hub-ring-thickness: var(--hub-ref-space-2, .5rem);--hub-ring-track: color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 20%, transparent);--hub-ring-indicator: var(--hub-sys-color-primary, #0d6efd);--hub-ring-caption-color: var(--hub-sys-text-primary, #212529);--hub-ring-low-color: var(--hub-sys-color-danger, #dc3545);--hub-ring-high-color: var(--hub-sys-color-success, #198754)}:host{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--hub-ring-size);block-size:var(--hub-ring-size)}.hub-ring__svg{inline-size:100%;block-size:100%;transform:rotate(-90deg);overflow:visible}.hub-ring__track,.hub-ring__indicator{fill:none;stroke-width:var(--hub-ring-thickness);stroke-linecap:round}.hub-ring__track{stroke:var(--hub-ring-track)}.hub-ring__indicator{stroke:var(--hub-ring-indicator);transition:stroke-dashoffset .4s ease,stroke .3s ease}.hub-ring__caption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;color:var(--hub-ring-caption-color);text-align:center;line-height:1.1;pointer-events:none}.hub-ring__value{font-size:calc(var(--hub-ring-size) * .24);font-weight:var(--hub-ref-font-weight-semibold, 600);font-variant-numeric:tabular-nums}:host(.hub-ring--low){--hub-ring-indicator: var(--hub-ring-low-color)}:host(.hub-ring--high){--hub-ring-indicator: var(--hub-ring-high-color)}@media(prefers-reduced-motion:reduce){.hub-ring__indicator{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubRingComponent, decorators: [{
             type: Component,
@@ -311,7 +318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         '[style.--hub-ring-thickness]': 'thicknessCss()',
                         '[attr.aria-valuemin]': '0',
                         '[attr.aria-valuemax]': 'max()',
-                        '[attr.aria-valuenow]': 'value()',
+                        '[attr.aria-valuenow]': 'ariaValueNow()',
                         '[attr.aria-valuetext]': 'displayValue()',
                         '[attr.aria-label]': 'label() || null'
                     }, template: "<svg class=\"hub-ring__svg\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\">\n\t<circle class=\"hub-ring__track\" cx=\"50\" cy=\"50\" r=\"44\" [attr.pathLength]=\"PATH_LENGTH\" />\n\t<circle\n\t\tclass=\"hub-ring__indicator\"\n\t\tcx=\"50\"\n\t\tcy=\"50\"\n\t\tr=\"44\"\n\t\t[attr.pathLength]=\"PATH_LENGTH\"\n\t\t[attr.stroke-dasharray]=\"dashArray()\"\n\t\t[attr.stroke-dashoffset]=\"dashOffset()\"\n\t/>\n</svg>\n\n<span class=\"hub-ring__caption\">\n\t@if (showValue()) {\n\t\t<span class=\"hub-ring__value\">{{ displayValue() }}</span>\n\t}\n\t<ng-content />\n</span>\n", styles: [":where(:host){--hub-ring-size: 4rem;--hub-ring-thickness: var(--hub-ref-space-2, .5rem);--hub-ring-track: color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 20%, transparent);--hub-ring-indicator: var(--hub-sys-color-primary, #0d6efd);--hub-ring-caption-color: var(--hub-sys-text-primary, #212529);--hub-ring-low-color: var(--hub-sys-color-danger, #dc3545);--hub-ring-high-color: var(--hub-sys-color-success, #198754)}:host{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--hub-ring-size);block-size:var(--hub-ring-size)}.hub-ring__svg{inline-size:100%;block-size:100%;transform:rotate(-90deg);overflow:visible}.hub-ring__track,.hub-ring__indicator{fill:none;stroke-width:var(--hub-ring-thickness);stroke-linecap:round}.hub-ring__track{stroke:var(--hub-ring-track)}.hub-ring__indicator{stroke:var(--hub-ring-indicator);transition:stroke-dashoffset .4s ease,stroke .3s ease}.hub-ring__caption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;color:var(--hub-ring-caption-color);text-align:center;line-height:1.1;pointer-events:none}.hub-ring__value{font-size:calc(var(--hub-ring-size) * .24);font-weight:var(--hub-ref-font-weight-semibold, 600);font-variant-numeric:tabular-nums}:host(.hub-ring--low){--hub-ring-indicator: var(--hub-ring-low-color)}:host(.hub-ring--high){--hub-ring-indicator: var(--hub-ring-high-color)}@media(prefers-reduced-motion:reduce){.hub-ring__indicator{transition:none}}\n"] }]

package/fesm2022/ng-hub-ui-metrics.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-hub-ui-metrics.mjs","sources":["../../../projects/metrics/src/lib/components/progress/progress.component.ts","../../../projects/metrics/src/lib/components/progress/progress.component.html","../../../projects/metrics/src/lib/components/meter/meter.component.ts","../../../projects/metrics/src/lib/components/meter/meter.component.html","../../../projects/metrics/src/lib/components/ring/ring.component.ts","../../../projects/metrics/src/lib/components/ring/ring.component.html","../../../projects/metrics/src/public-api.ts","../../../projects/metrics/src/ng-hub-ui-metrics.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { HubMetricsColor } from '../../models/metrics.types';\nimport { resolveHubAccent } from 'ng-hub-ui-utils';\nimport { HubProgressSize } from './progress.types';\n\n/**\n * Linear progress bar for a determinate or indeterminate read-only value.\n *\n * The component owns no hard-coded colour values: the semantic `color` input\n * maps to the host application's `--hub-sys-color-*` token family and drives the\n * indicator through the local `--hub-progress-accent` slot. When\n * {@link indeterminate} is set the bar loops a looping animation and drops\n * `aria-valuenow`, matching the ARIA `progressbar` contract for an unknown value.\n */\n@Component({\n\tselector: 'hub-progress',\n\tstandalone: true,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplateUrl: './progress.component.html',\n\tstyleUrl: './progress.component.scss',\n\thost: {\n\t\tclass: 'hub-progress',\n\t\trole: 'progressbar',\n\t\t'[class]': 'hostClasses()',\n\t\t'[style.--hub-progress-accent]': 'accentVar()',\n\t\t'[style.--hub-progress-value]': 'valueCss()',\n\t\t'[attr.aria-valuemin]': '0',\n\t\t'[attr.aria-valuemax]': 'max()',\n\t\t'[attr.aria-valuenow]': 'ariaValueNow()',\n\t\t'[attr.aria-label]': 'label() || null',\n\t\t'[attr.aria-busy]': 'indeterminate() || null'\n\t}\n})\nexport class HubProgressComponent {\n\t/** Current progress value, expressed on the `[0, max]` scale. */\n\treadonly value = input<number>(0);\n\n\t/** Upper bound of the progress scale. */\n\treadonly max = input<number>(100);\n\n\t/** Renders a looping bar for work of unknown duration; drops `aria-valuenow`. */\n\treadonly indeterminate = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Optional accent driving the indicator colour. Accepts any colour: a bareword\n\t * (semantic name, registered accent or CSS named colour) maps to\n\t * `--hub-sys-color-<color>` with the word itself as the raw fallback, while a\n\t * literal (`#hex`, `rgb()`, `oklch()`, `var()`…) is passed through unchanged.\n\t * The resolved value is applied inline (a per-instance override); when omitted\n\t * the accent falls back to the `--hub-progress-accent` token, so a theme\n\t * (`hub-metrics-theme` mixin / ancestor override) can drive it instead.\n\t */\n\treadonly color = input<HubMetricsColor | undefined>(undefined);\n\n\t/** Size token controlling the bar thickness. */\n\treadonly size = input<HubProgressSize>('md');\n\n\t/** Whether the rounded percentage is rendered next to the bar. */\n\treadonly showValue = input(false, { transform: booleanAttribute });\n\n\t/** Accessible label describing what the progress bar measures. */\n\treadonly label = input<string>('');\n\n\t/** Value clamped to the `[0, max]` range; `0` when `max` is not positive. */\n\tprotected readonly clampedValue = computed(() => {\n\t\tconst max = this.max();\n\t\tif (max <= 0) {\n\t\t\treturn 0;\n\t\t}\n\t\treturn Math.min(max, Math.max(0, this.value()));\n\t});\n\n\t/** Completion ratio as a `0..100` percentage; `0` while indeterminate. */\n\tprotected readonly percent = computed(() => {\n\t\tconst max = this.max();\n\t\tif (this.indeterminate() || max <= 0) {\n\t\t\treturn 0;\n\t\t}\n\t\treturn (this.clampedValue() / max) * 100;\n\t});\n\n\t/** Indicator width as a CSS length consumed by `--hub-progress-value`. */\n\tprotected readonly valueCss = computed(() => `${this.percent()}%`);\n\n\t/** Rounded percentage label shown when {@link showValue} is enabled. */\n\tprotected readonly displayValue = computed(() => `${Math.round(this.percent())}%`);\n\n\t/** `aria-valuenow`, omitted (null) while the bar is {@link indeterminate}. */\n\tprotected readonly ariaValueNow = computed(() => (this.indeterminate() ? null : this.clampedValue()));\n\n\t/**\n\t * Local accent slot resolved from the {@link color} input. A bareword resolves\n\t * to `var(--hub-sys-color-<color>, <color>)` — the ds token with the word as a\n\t * raw fallback — while a literal colour (`#hex`, `rgb()`, `oklch()`, `var()`…)\n\t * is passed through unchanged. Returns `null` when no colour is set so the\n\t * inline binding is dropped and the `--hub-progress-accent` token (default or\n\t * theme override) takes over.\n\t */\n\tprotected readonly accentVar = computed(() => resolveHubAccent(this.color()));\n\n\t/** Host modifier classes derived from the signal inputs. */\n\tprotected readonly hostClasses = computed(() =>\n\t\t['hub-progress', `hub-progress--${this.size()}`, this.indeterminate() ? 'hub-progress--indeterminate' : '']\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ')\n\t);\n}\n","@if (label()) {\n\t<span class=\"hub-progress__label\">{{ label() }}</span>\n}\n\n<span class=\"hub-progress__track\">\n\t<span class=\"hub-progress__indicator\"></span>\n</span>\n\n@if (showValue() && !indeterminate()) {\n\t<span class=\"hub-progress__value\">{{ displayValue() }}</span>\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { HubMeterBand, HubMeterResolved } from './meter.types';\n\n/**\n * Graded gauge bar following HTML `<meter>` semantics for a scalar measurement\n * within a known range (disk usage, score, capacity…).\n *\n * The filled colour reflects which band the value falls in relative to the\n * `optimum` point: inside the `[low, high]` plateau it uses the optimum fill,\n * below `optimum` and outside the plateau the low fill, above it the high fill.\n * Every band colour derives from a `--hub-meter-*-bg` token so no colour is\n * hard-coded.\n */\n@Component({\n\tselector: 'hub-meter',\n\tstandalone: true,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplateUrl: './meter.component.html',\n\tstyleUrl: './meter.component.scss',\n\thost: {\n\t\tclass: 'hub-meter',\n\t\trole: 'meter',\n\t\t'[class]': 'hostClasses()',\n\t\t'[attr.data-band]': 'band()',\n\t\t'[style.--hub-meter-value]': 'valueCss()',\n\t\t'[attr.aria-valuemin]': 'resolved().min',\n\t\t'[attr.aria-valuemax]': 'resolved().max',\n\t\t'[attr.aria-valuenow]': 'resolved().value',\n\t\t'[attr.aria-valuetext]': 'valueText()',\n\t\t'[attr.aria-label]': 'label() || null'\n\t}\n})\nexport class HubMeterComponent {\n\t/** Current measurement, expressed on the `[min, max]` scale. */\n\treadonly value = input<number>(0);\n\n\t/** Lower bound of the scale. */\n\treadonly min = input<number>(0);\n\n\t/** Upper bound of the scale. */\n\treadonly max = input<number>(1);\n\n\t/** Upper limit of the \"low\" region; defaults to {@link min} when omitted. */\n\treadonly low = input<number | undefined>(undefined);\n\n\t/** Lower limit of the \"high\" region; defaults to {@link max} when omitted. */\n\treadonly high = input<number | undefined>(undefined);\n\n\t/** Preferred point of the range; defaults to the midpoint when omitted. */\n\treadonly optimum = input<number | undefined>(undefined);\n\n\t/**\n\t * Accessible label describing what is being measured. `role=\"meter\"` takes its\n\t * name from the author only, so without it the gauge reaches assistive\n\t * technology unnamed — the component renders no text of its own.\n\t */\n\treadonly label = input<string>('');\n\n\t/** Fully resolved, clamped bounds derived from the raw inputs. */\n\tprotected readonly resolved = computed<HubMeterResolved>(() => {\n\t\tconst min = this.min();\n\t\tconst max = Math.max(min, this.max());\n\t\tconst clamp = (candidate: number): number => Math.min(max, Math.max(min, candidate));\n\n\t\tconst value = clamp(this.value());\n\t\tconst low = this.low() === undefined ? min : clamp(this.low() as number);\n\t\tconst high = this.high() === undefined ? max : Math.max(low, clamp(this.high() as number));\n\t\tconst optimum = this.optimum() === undefined ? (min + max) / 2 : clamp(this.optimum() as number);\n\t\tconst span = max - min;\n\t\tconst percent = span <= 0 ? 0 : ((value - min) / span) * 100;\n\n\t\treturn { min, max, value, low, high, optimum, percent };\n\t});\n\n\t/**\n\t * The band the value falls in: `optimum` inside the `[low, high]` plateau,\n\t * otherwise `low`/`high` depending on which side of `optimum` the value sits.\n\t */\n\tprotected readonly band = computed<HubMeterBand>(() => {\n\t\tconst { value, low, high, optimum } = this.resolved();\n\t\tif (value >= low && value <= high) {\n\t\t\treturn 'optimum';\n\t\t}\n\t\treturn value < optimum ? 'low' : 'high';\n\t});\n\n\t/** Fill width as a CSS length consumed by `--hub-meter-value`. */\n\tprotected readonly valueCss = computed(() => `${this.resolved().percent}%`);\n\n\t/** Human-readable `aria-valuetext` (rounded percentage plus band). */\n\tprotected readonly valueText = computed(() => `${Math.round(this.resolved().percent)}% (${this.band()})`);\n\n\t/** Host modifier classes derived from the computed band. */\n\tprotected readonly hostClasses = computed(() => ['hub-meter', `hub-meter--${this.band()}`].join(' '));\n}\n","<span class=\"hub-meter__track\">\n\t<span class=\"hub-meter__indicator\"></span>\n</span>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { HubRingBand, HubRingThresholds } from './ring.types';\n\n/**\n * Circular gauge (ring) rendering a normalized score as an SVG arc.\n *\n * The value is normalized against `max` (accepting either a `0..1` ratio or a\n * `0..max` figure) and drawn with a `stroke-dasharray`/`stroke-dashoffset` arc\n * over a `pathLength`-normalized circle, so the offset maps linearly to the\n * completion (100 at 0%, 0 at 100%). Optional {@link thresholds} recolour the\n * indicator through the `--hub-ring-low-color` / `--hub-ring-high-color` tokens;\n * a centred caption is projected through `<ng-content>`. That caption is decoration:\n * `role=\"meter\"` is named by the author, so pass {@link label} to name the gauge.\n *\n * @example\n * ```html\n * <hub-ring [value]=\"0.82\" [thresholds]=\"{ low: 0.4, high: 0.75 }\" label=\"Quality score\">Score</hub-ring>\n * ```\n */\n@Component({\n\tselector: 'hub-ring',\n\texportAs: 'hubGauge',\n\tstandalone: true,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplateUrl: './ring.component.html',\n\tstyleUrl: './ring.component.scss',\n\thost: {\n\t\tclass: 'hub-ring',\n\t\trole: 'meter',\n\t\t'[class]': 'hostClasses()',\n\t\t'[style.--hub-ring-size]': 'sizeCss()',\n\t\t'[style.--hub-ring-thickness]': 'thicknessCss()',\n\t\t'[attr.aria-valuemin]': '0',\n\t\t'[attr.aria-valuemax]': 'max()',\n\t\t'[attr.aria-valuenow]': 'value()',\n\t\t'[attr.aria-valuetext]': 'displayValue()',\n\t\t'[attr.aria-label]': 'label() || null'\n\t}\n})\nexport class HubRingComponent {\n\t/** Score value, expressed as a `0..1` ratio or a `0..max` figure. */\n\treadonly value = input<number>(0);\n\n\t/** Upper bound the {@link value} is normalized against. */\n\treadonly max = input<number>(1);\n\n\t/**\n\t * Outer diameter of the ring (number → px, or any CSS length string), applied\n\t * inline as a per-instance override. Omit it to let the `--hub-ring-size`\n\t * token (default or theme override) drive the diameter.\n\t */\n\treadonly size = input<number | string | undefined>(undefined);\n\n\t/**\n\t * Stroke width of the ring (number → px, or any CSS length string), applied\n\t * inline as a per-instance override. Omit it to let the\n\t * `--hub-ring-thickness` token (default or theme override) drive the stroke.\n\t */\n\treadonly thickness = input<number | string | undefined>(undefined);\n\n\t/** Optional colour thresholds recolouring the indicator by band. */\n\treadonly thresholds = input<HubRingThresholds | undefined>(undefined);\n\n\t/** Whether the rounded percentage is rendered in the centre. */\n\treadonly showValue = input(true, { transform: booleanAttribute });\n\n\t/**\n\t * Accessible label describing what the ring scores. `role=\"meter\"` takes its\n\t * name from the author only, so neither the projected caption nor the centred\n\t * percentage can name the gauge — this input is the only way to do it.\n\t */\n\treadonly label = input<string>('');\n\n\t/** Total normalized path length of the SVG circle (see `pathLength`). */\n\tprotected readonly PATH_LENGTH = 100;\n\n\t/** Completion ratio in `[0, 1]`; `0` when `max` is not positive. */\n\tprotected readonly fraction = computed(() => {\n\t\tconst max = this.max();\n\t\tif (max <= 0) {\n\t\t\treturn 0;\n\t\t}\n\t\treturn Math.min(1, Math.max(0, this.value() / max));\n\t});\n\n\t/** Completion as a `0..100` percentage. */\n\tprotected readonly percent = computed(() => this.fraction() * 100);\n\n\t/** Dash pattern for the indicator (the full normalized path). */\n\tprotected readonly dashArray = computed(() => this.PATH_LENGTH);\n\n\t/** Dash offset drawing the arc: `PATH_LENGTH` at 0%, `0` at 100%. */\n\tprotected readonly dashOffset = computed(() => this.PATH_LENGTH * (1 - this.fraction()));\n\n\t/** Rounded percentage label shown in the centre when {@link showValue} is on. */\n\tprotected readonly displayValue = computed(() => `${Math.round(this.percent())}%`);\n\n\t/** Colour band derived from the optional {@link thresholds} against the value. */\n\tprotected readonly band = computed<HubRingBand>(() => {\n\t\tconst thresholds = this.thresholds();\n\t\tif (!thresholds) {\n\t\t\treturn 'default';\n\t\t}\n\t\tconst value = this.value();\n\t\tif (thresholds.low !== undefined && value < thresholds.low) {\n\t\t\treturn 'low';\n\t\t}\n\t\tif (thresholds.high !== undefined && value >= thresholds.high) {\n\t\t\treturn 'high';\n\t\t}\n\t\treturn 'default';\n\t});\n\n\t/** Host modifier classes derived from the computed band. */\n\tprotected readonly hostClasses = computed(() => ['hub-ring', `hub-ring--${this.band()}`].join(' '));\n\n\t/** Ring diameter as a CSS length (numbers are treated as pixels). */\n\tprotected readonly sizeCss = computed(() => this.toCssLength(this.size()));\n\n\t/** Stroke thickness as a CSS length (numbers are treated as pixels). */\n\tprotected readonly thicknessCss = computed(() => this.toCssLength(this.thickness()));\n\n\t/**\n\t * Normalizes a number|string dimension into a CSS length string, returning\n\t * `null` when the input is unset so the inline binding is dropped altogether\n\t * and the stylesheet token wins the cascade instead of being shadowed.\n\t */\n\tprivate toCssLength(dimension: number | string | undefined): string | null {\n\t\tif (dimension === undefined) {\n\t\t\treturn null;\n\t\t}\n\t\treturn typeof dimension === 'number' ? `${dimension}px` : dimension;\n\t}\n}\n","<svg class=\"hub-ring__svg\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\">\n\t<circle class=\"hub-ring__track\" cx=\"50\" cy=\"50\" r=\"44\" [attr.pathLength]=\"PATH_LENGTH\" />\n\t<circle\n\t\tclass=\"hub-ring__indicator\"\n\t\tcx=\"50\"\n\t\tcy=\"50\"\n\t\tr=\"44\"\n\t\t[attr.pathLength]=\"PATH_LENGTH\"\n\t\t[attr.stroke-dasharray]=\"dashArray()\"\n\t\t[attr.stroke-dashoffset]=\"dashOffset()\"\n\t/>\n</svg>\n\n<span class=\"hub-ring__caption\">\n\t@if (showValue()) {\n\t\t<span class=\"hub-ring__value\">{{ displayValue() }}</span>\n\t}\n\t<ng-content />\n</span>\n","/*\n * Public API Surface of ng-hub-ui-metrics\n */\n\n// Components\nexport { HubProgressComponent } from './lib/components/progress/progress.component';\nexport { HubMeterComponent } from './lib/components/meter/meter.component';\nexport { HubRingComponent } from './lib/components/ring/ring.component';\n\n// Types\nexport type { HubMetricsColor, HubMetricsBuiltinColor } from './lib/models/metrics.types';\nexport type { HubProgressSize } from './lib/components/progress/progress.types';\nexport type { HubMeterBand, HubMeterResolved } from './lib/components/meter/meter.types';\nexport type { HubRingBand, HubRingThresholds } from './lib/components/ring/ring.types';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-hub-ui-metrics.mjs","sources":["../../../projects/metrics/src/lib/components/progress/progress.component.ts","../../../projects/metrics/src/lib/components/progress/progress.component.html","../../../projects/metrics/src/lib/components/meter/meter.component.ts","../../../projects/metrics/src/lib/components/meter/meter.component.html","../../../projects/metrics/src/lib/components/ring/ring.component.ts","../../../projects/metrics/src/lib/components/ring/ring.component.html","../../../projects/metrics/src/public-api.ts","../../../projects/metrics/src/ng-hub-ui-metrics.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { HubMetricsColor } from '../../models/metrics.types';\nimport { resolveHubAccent } from 'ng-hub-ui-utils';\nimport { HubProgressSize } from './progress.types';\n\n/**\n * Linear progress bar for a determinate or indeterminate read-only value.\n *\n * The component owns no hard-coded colour values: the semantic `color` input\n * maps to the host application's `--hub-sys-color-*` token family and drives the\n * indicator through the local `--hub-progress-accent` slot. When\n * {@link indeterminate} is set the bar loops a looping animation and drops\n * `aria-valuenow`, matching the ARIA `progressbar` contract for an unknown value.\n */\n@Component({\n\tselector: 'hub-progress',\n\tstandalone: true,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplateUrl: './progress.component.html',\n\tstyleUrl: './progress.component.scss',\n\thost: {\n\t\tclass: 'hub-progress',\n\t\trole: 'progressbar',\n\t\t'[class]': 'hostClasses()',\n\t\t'[style.--hub-progress-accent]': 'accentVar()',\n\t\t'[style.--hub-progress-value]': 'valueCss()',\n\t\t'[attr.aria-valuemin]': '0',\n\t\t'[attr.aria-valuemax]': 'max()',\n\t\t'[attr.aria-valuenow]': 'ariaValueNow()',\n\t\t'[attr.aria-label]': 'label() || null',\n\t\t'[attr.aria-busy]': 'indeterminate() || null'\n\t}\n})\nexport class HubProgressComponent {\n\t/** Current progress value, expressed on the `[0, max]` scale. */\n\treadonly value = input<number>(0);\n\n\t/** Upper bound of the progress scale. */\n\treadonly max = input<number>(100);\n\n\t/** Renders a looping bar for work of unknown duration; drops `aria-valuenow`. */\n\treadonly indeterminate = input(false, { transform: booleanAttribute });\n\n\t/**\n\t * Optional accent driving the indicator colour. Accepts any colour: a bareword\n\t * (semantic name, registered accent or CSS named colour) maps to\n\t * `--hub-sys-color-<color>` with the word itself as the raw fallback, while a\n\t * literal (`#hex`, `rgb()`, `oklch()`, `var()`…) is passed through unchanged.\n\t * The resolved value is applied inline (a per-instance override); when omitted\n\t * the accent falls back to the `--hub-progress-accent` token, so a theme\n\t * (`hub-metrics-theme` mixin / ancestor override) can drive it instead.\n\t */\n\treadonly color = input<HubMetricsColor | undefined>(undefined);\n\n\t/** Size token controlling the bar thickness. */\n\treadonly size = input<HubProgressSize>('md');\n\n\t/** Whether the rounded percentage is rendered next to the bar. */\n\treadonly showValue = input(false, { transform: booleanAttribute });\n\n\t/** Accessible label describing what the progress bar measures. */\n\treadonly label = input<string>('');\n\n\t/** Value clamped to the `[0, max]` range; `0` when `max` is not positive. */\n\tprotected readonly clampedValue = computed(() => {\n\t\tconst max = this.max();\n\t\tif (max <= 0) {\n\t\t\treturn 0;\n\t\t}\n\t\treturn Math.min(max, Math.max(0, this.value()));\n\t});\n\n\t/** Completion ratio as a `0..100` percentage; `0` while indeterminate. */\n\tprotected readonly percent = computed(() => {\n\t\tconst max = this.max();\n\t\tif (this.indeterminate() || max <= 0) {\n\t\t\treturn 0;\n\t\t}\n\t\treturn (this.clampedValue() / max) * 100;\n\t});\n\n\t/** Indicator width as a CSS length consumed by `--hub-progress-value`. */\n\tprotected readonly valueCss = computed(() => `${this.percent()}%`);\n\n\t/** Rounded percentage label shown when {@link showValue} is enabled. */\n\tprotected readonly displayValue = computed(() => `${Math.round(this.percent())}%`);\n\n\t/** `aria-valuenow`, omitted (null) while the bar is {@link indeterminate}. */\n\tprotected readonly ariaValueNow = computed(() => (this.indeterminate() ? null : this.clampedValue()));\n\n\t/**\n\t * Local accent slot resolved from the {@link color} input. A bareword resolves\n\t * to `var(--hub-sys-color-<color>, <color>)` — the ds token with the word as a\n\t * raw fallback — while a literal colour (`#hex`, `rgb()`, `oklch()`, `var()`…)\n\t * is passed through unchanged. Returns `null` when no colour is set so the\n\t * inline binding is dropped and the `--hub-progress-accent` token (default or\n\t * theme override) takes over.\n\t */\n\tprotected readonly accentVar = computed(() => resolveHubAccent(this.color()));\n\n\t/** Host modifier classes derived from the signal inputs. */\n\tprotected readonly hostClasses = computed(() =>\n\t\t['hub-progress', `hub-progress--${this.size()}`, this.indeterminate() ? 'hub-progress--indeterminate' : '']\n\t\t\t.filter(Boolean)\n\t\t\t.join(' ')\n\t);\n}\n","@if (label()) {\n\t<span class=\"hub-progress__label\">{{ label() }}</span>\n}\n\n<span class=\"hub-progress__track\">\n\t<span class=\"hub-progress__indicator\"></span>\n</span>\n\n@if (showValue() && !indeterminate()) {\n\t<span class=\"hub-progress__value\">{{ displayValue() }}</span>\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { HubMeterBand, HubMeterResolved } from './meter.types';\n\n/**\n * Graded gauge bar following HTML `<meter>` semantics for a scalar measurement\n * within a known range (disk usage, score, capacity…).\n *\n * The filled colour reflects which band the value falls in relative to the\n * `optimum` point: inside the `[low, high]` plateau it uses the optimum fill,\n * below `optimum` and outside the plateau the low fill, above it the high fill.\n * Every band colour derives from a `--hub-meter-*-bg` token so no colour is\n * hard-coded.\n */\n@Component({\n\tselector: 'hub-meter',\n\tstandalone: true,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplateUrl: './meter.component.html',\n\tstyleUrl: './meter.component.scss',\n\thost: {\n\t\tclass: 'hub-meter',\n\t\trole: 'meter',\n\t\t'[class]': 'hostClasses()',\n\t\t'[attr.data-band]': 'band()',\n\t\t'[style.--hub-meter-value]': 'valueCss()',\n\t\t'[attr.aria-valuemin]': 'resolved().min',\n\t\t'[attr.aria-valuemax]': 'resolved().max',\n\t\t'[attr.aria-valuenow]': 'resolved().value',\n\t\t'[attr.aria-valuetext]': 'valueText()',\n\t\t'[attr.aria-label]': 'label() || null'\n\t}\n})\nexport class HubMeterComponent {\n\t/** Current measurement, expressed on the `[min, max]` scale. */\n\treadonly value = input<number>(0);\n\n\t/** Lower bound of the scale. */\n\treadonly min = input<number>(0);\n\n\t/** Upper bound of the scale. */\n\treadonly max = input<number>(1);\n\n\t/** Upper limit of the \"low\" region; defaults to {@link min} when omitted. */\n\treadonly low = input<number | undefined>(undefined);\n\n\t/** Lower limit of the \"high\" region; defaults to {@link max} when omitted. */\n\treadonly high = input<number | undefined>(undefined);\n\n\t/** Preferred point of the range; defaults to the midpoint when omitted. */\n\treadonly optimum = input<number | undefined>(undefined);\n\n\t/**\n\t * Accessible label describing what is being measured. `role=\"meter\"` takes its\n\t * name from the author only, so without it the gauge reaches assistive\n\t * technology unnamed — the component renders no text of its own.\n\t */\n\treadonly label = input<string>('');\n\n\t/** Fully resolved, clamped bounds derived from the raw inputs. */\n\tprotected readonly resolved = computed<HubMeterResolved>(() => {\n\t\tconst min = this.min();\n\t\tconst max = Math.max(min, this.max());\n\t\tconst clamp = (candidate: number): number => Math.min(max, Math.max(min, candidate));\n\n\t\tconst value = clamp(this.value());\n\t\tconst low = this.low() === undefined ? min : clamp(this.low() as number);\n\t\tconst high = this.high() === undefined ? max : Math.max(low, clamp(this.high() as number));\n\t\tconst optimum = this.optimum() === undefined ? (min + max) / 2 : clamp(this.optimum() as number);\n\t\tconst span = max - min;\n\t\tconst percent = span <= 0 ? 0 : ((value - min) / span) * 100;\n\n\t\treturn { min, max, value, low, high, optimum, percent };\n\t});\n\n\t/**\n\t * The band the value falls in: `optimum` inside the `[low, high]` plateau,\n\t * otherwise `low`/`high` depending on which side of `optimum` the value sits.\n\t */\n\tprotected readonly band = computed<HubMeterBand>(() => {\n\t\tconst { value, low, high, optimum } = this.resolved();\n\t\tif (value >= low && value <= high) {\n\t\t\treturn 'optimum';\n\t\t}\n\t\treturn value < optimum ? 'low' : 'high';\n\t});\n\n\t/** Fill width as a CSS length consumed by `--hub-meter-value`. */\n\tprotected readonly valueCss = computed(() => `${this.resolved().percent}%`);\n\n\t/** Human-readable `aria-valuetext` (rounded percentage plus band). */\n\tprotected readonly valueText = computed(() => `${Math.round(this.resolved().percent)}% (${this.band()})`);\n\n\t/** Host modifier classes derived from the computed band. */\n\tprotected readonly hostClasses = computed(() => ['hub-meter', `hub-meter--${this.band()}`].join(' '));\n}\n","<span class=\"hub-meter__track\">\n\t<span class=\"hub-meter__indicator\"></span>\n</span>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { HubRingBand, HubRingThresholds } from './ring.types';\n\n/**\n * Circular gauge (ring) rendering a normalized score as an SVG arc.\n *\n * The value is normalized against `max` (accepting either a `0..1` ratio or a\n * `0..max` figure) and drawn with a `stroke-dasharray`/`stroke-dashoffset` arc\n * over a `pathLength`-normalized circle, so the offset maps linearly to the\n * completion (100 at 0%, 0 at 100%). Optional {@link thresholds} recolour the\n * indicator through the `--hub-ring-low-color` / `--hub-ring-high-color` tokens;\n * a centred caption is projected through `<ng-content>`. That caption is decoration:\n * `role=\"meter\"` is named by the author, so pass {@link label} to name the gauge.\n *\n * @example\n * ```html\n * <hub-ring [value]=\"0.82\" [thresholds]=\"{ low: 0.4, high: 0.75 }\" label=\"Quality score\">Score</hub-ring>\n * ```\n */\n@Component({\n\tselector: 'hub-ring',\n\texportAs: 'hubGauge',\n\tstandalone: true,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplateUrl: './ring.component.html',\n\tstyleUrl: './ring.component.scss',\n\thost: {\n\t\tclass: 'hub-ring',\n\t\trole: 'meter',\n\t\t'[class]': 'hostClasses()',\n\t\t'[style.--hub-ring-size]': 'sizeCss()',\n\t\t'[style.--hub-ring-thickness]': 'thicknessCss()',\n\t\t'[attr.aria-valuemin]': '0',\n\t\t'[attr.aria-valuemax]': 'max()',\n\t\t'[attr.aria-valuenow]': 'ariaValueNow()',\n\t\t'[attr.aria-valuetext]': 'displayValue()',\n\t\t'[attr.aria-label]': 'label() || null'\n\t}\n})\nexport class HubRingComponent {\n\t/** Score value, expressed as a `0..1` ratio or a `0..max` figure. */\n\treadonly value = input<number>(0);\n\n\t/** Upper bound the {@link value} is normalized against. */\n\treadonly max = input<number>(1);\n\n\t/**\n\t * Outer diameter of the ring (number → px, or any CSS length string), applied\n\t * inline as a per-instance override. Omit it to let the `--hub-ring-size`\n\t * token (default or theme override) drive the diameter.\n\t */\n\treadonly size = input<number | string | undefined>(undefined);\n\n\t/**\n\t * Stroke width of the ring (number → px, or any CSS length string), applied\n\t * inline as a per-instance override. Omit it to let the\n\t * `--hub-ring-thickness` token (default or theme override) drive the stroke.\n\t */\n\treadonly thickness = input<number | string | undefined>(undefined);\n\n\t/** Optional colour thresholds recolouring the indicator by band. */\n\treadonly thresholds = input<HubRingThresholds | undefined>(undefined);\n\n\t/** Whether the rounded percentage is rendered in the centre. */\n\treadonly showValue = input(true, { transform: booleanAttribute });\n\n\t/**\n\t * Accessible label describing what the ring scores. `role=\"meter\"` takes its\n\t * name from the author only, so neither the projected caption nor the centred\n\t * percentage can name the gauge — this input is the only way to do it.\n\t */\n\treadonly label = input<string>('');\n\n\t/** Total normalized path length of the SVG circle (see `pathLength`). */\n\tprotected readonly PATH_LENGTH = 100;\n\n\t/** Completion ratio in `[0, 1]`; `0` when `max` is not positive. */\n\tprotected readonly fraction = computed(() => {\n\t\tconst max = this.max();\n\t\tif (max <= 0) {\n\t\t\treturn 0;\n\t\t}\n\t\treturn Math.min(1, Math.max(0, this.value() / max));\n\t});\n\n\t/**\n\t * Value announced to assistive technology. The arc paints the clamped ratio, so\n\t * reporting the raw input would put `aria-valuenow` outside the range it is\n\t * measured against the moment a caller overshoots `max`.\n\t */\n\tprotected readonly ariaValueNow = computed(() => this.fraction() * this.max());\n\n\t/** Completion as a `0..100` percentage. */\n\tprotected readonly percent = computed(() => this.fraction() * 100);\n\n\t/** Dash pattern for the indicator (the full normalized path). */\n\tprotected readonly dashArray = computed(() => this.PATH_LENGTH);\n\n\t/** Dash offset drawing the arc: `PATH_LENGTH` at 0%, `0` at 100%. */\n\tprotected readonly dashOffset = computed(() => this.PATH_LENGTH * (1 - this.fraction()));\n\n\t/** Rounded percentage label shown in the centre when {@link showValue} is on. */\n\tprotected readonly displayValue = computed(() => `${Math.round(this.percent())}%`);\n\n\t/** Colour band derived from the optional {@link thresholds} against the value. */\n\tprotected readonly band = computed<HubRingBand>(() => {\n\t\tconst thresholds = this.thresholds();\n\t\tif (!thresholds) {\n\t\t\treturn 'default';\n\t\t}\n\t\tconst value = this.value();\n\t\tif (thresholds.low !== undefined && value < thresholds.low) {\n\t\t\treturn 'low';\n\t\t}\n\t\tif (thresholds.high !== undefined && value >= thresholds.high) {\n\t\t\treturn 'high';\n\t\t}\n\t\treturn 'default';\n\t});\n\n\t/** Host modifier classes derived from the computed band. */\n\tprotected readonly hostClasses = computed(() => ['hub-ring', `hub-ring--${this.band()}`].join(' '));\n\n\t/** Ring diameter as a CSS length (numbers are treated as pixels). */\n\tprotected readonly sizeCss = computed(() => this.toCssLength(this.size()));\n\n\t/** Stroke thickness as a CSS length (numbers are treated as pixels). */\n\tprotected readonly thicknessCss = computed(() => this.toCssLength(this.thickness()));\n\n\t/**\n\t * Normalizes a number|string dimension into a CSS length string, returning\n\t * `null` when the input is unset so the inline binding is dropped altogether\n\t * and the stylesheet token wins the cascade instead of being shadowed.\n\t */\n\tprivate toCssLength(dimension: number | string | undefined): string | null {\n\t\tif (dimension === undefined) {\n\t\t\treturn null;\n\t\t}\n\t\treturn typeof dimension === 'number' ? `${dimension}px` : dimension;\n\t}\n}\n","<svg class=\"hub-ring__svg\" viewBox=\"0 0 100 100\" aria-hidden=\"true\" focusable=\"false\">\n\t<circle class=\"hub-ring__track\" cx=\"50\" cy=\"50\" r=\"44\" [attr.pathLength]=\"PATH_LENGTH\" />\n\t<circle\n\t\tclass=\"hub-ring__indicator\"\n\t\tcx=\"50\"\n\t\tcy=\"50\"\n\t\tr=\"44\"\n\t\t[attr.pathLength]=\"PATH_LENGTH\"\n\t\t[attr.stroke-dasharray]=\"dashArray()\"\n\t\t[attr.stroke-dashoffset]=\"dashOffset()\"\n\t/>\n</svg>\n\n<span class=\"hub-ring__caption\">\n\t@if (showValue()) {\n\t\t<span class=\"hub-ring__value\">{{ displayValue() }}</span>\n\t}\n\t<ng-content />\n</span>\n","/*\n * Public API Surface of ng-hub-ui-metrics\n */\n\n// Components\nexport { HubProgressComponent } from './lib/components/progress/progress.component';\nexport { HubMeterComponent } from './lib/components/meter/meter.component';\nexport { HubRingComponent } from './lib/components/ring/ring.component';\n\n// Types\nexport type { HubMetricsColor, HubMetricsBuiltinColor } from './lib/models/metrics.types';\nexport type { HubProgressSize } from './lib/components/progress/progress.types';\nexport type { HubMeterBand, HubMeterResolved } from './lib/components/meter/meter.types';\nexport type { HubRingBand, HubRingThresholds } from './lib/components/ring/ring.types';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAKA;;;;;;;;AAQG;MAoBU,oBAAoB,CAAA;;IAEvB,KAAK,GAAG,KAAK,CAAS,CAAC;8EAAC;;IAGxB,GAAG,GAAG,KAAK,CAAS,GAAG;4EAAC;;IAGxB,aAAa,GAAG,KAAK,CAAC,KAAK,qFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEtE;;;;;;;;AAQG;IACM,KAAK,GAAG,KAAK,CAA8B,SAAS;8EAAC;;IAGrD,IAAI,GAAG,KAAK,CAAkB,IAAI;6EAAC;;IAGnC,SAAS,GAAG,KAAK,CAAC,KAAK,iFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;IAGzD,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;;AAGf,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAK;AAC/C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;AACtB,QAAA,IAAI,GAAG,IAAI,CAAC,EAAE;AACb,YAAA,OAAO,CAAC;QACT;AACA,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAChD,CAAC;qFAAC;;AAGiB,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAK;AAC1C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;QACtB,IAAI,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,IAAI,CAAC,EAAE;AACrC,YAAA,OAAO,CAAC;QACT;QACA,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,GAAG,IAAI,GAAG;IACzC,CAAC;gFAAC;;IAGiB,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,IAAI,CAAC,OAAO,EAAE,CAAA,CAAA,CAAG;iFAAC;;AAG/C,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA,CAAA,CAAG;qFAAC;;IAG/D,YAAY,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;qFAAC;AAErG;;;;;;;AAOG;AACgB,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;kFAAC;;AAG1D,IAAA,WAAW,GAAG,QAAQ,CAAC,MACzC,CAAC,cAAc,EAAE,CAAA,cAAA,EAAiB,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,6BAA6B,GAAG,EAAE;SACxG,MAAM,CAAC,OAAO;SACd,IAAI,CAAC,GAAG,CAAC;oFACX;uGAxEW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,i0CCjCjC,uSAWA,EAAA,MAAA,EAAA,CAAA,syDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDsBa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAnBhC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,cACZ,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EAGzC;AACL,wBAAA,KAAK,EAAE,cAAc;AACrB,wBAAA,IAAI,EAAE,aAAa;AACnB,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,+BAA+B,EAAE,aAAa;AAC9C,wBAAA,8BAA8B,EAAE,YAAY;AAC5C,wBAAA,sBAAsB,EAAE,GAAG;AAC3B,wBAAA,sBAAsB,EAAE,OAAO;AAC/B,wBAAA,sBAAsB,EAAE,gBAAgB;AACxC,wBAAA,mBAAmB,EAAE,iBAAiB;AACtC,wBAAA,kBAAkB,EAAE;AACpB,qBAAA,EAAA,QAAA,EAAA,uSAAA,EAAA,MAAA,EAAA,CAAA,syDAAA,CAAA,EAAA;;;AE5BF;;;;;;;;;AASG;MAoBU,iBAAiB,CAAA;;IAEpB,KAAK,GAAG,KAAK,CAAS,CAAC;8EAAC;;IAGxB,GAAG,GAAG,KAAK,CAAS,CAAC;4EAAC;;IAGtB,GAAG,GAAG,KAAK,CAAS,CAAC;4EAAC;;IAGtB,GAAG,GAAG,KAAK,CAAqB,SAAS;4EAAC;;IAG1C,IAAI,GAAG,KAAK,CAAqB,SAAS;6EAAC;;IAG3C,OAAO,GAAG,KAAK,CAAqB,SAAS;gFAAC;AAEvD;;;;AAIG;IACM,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;;AAGf,IAAA,QAAQ,GAAG,QAAQ,CAAmB,MAAK;AAC7D,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;AACtB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;QACrC,MAAM,KAAK,GAAG,CAAC,SAAiB,KAAa,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;QAEpF,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QACjC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,KAAK,SAAS,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,EAAY,CAAC;AACxE,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAY,CAAC,CAAC;AAC1F,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,SAAS,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,EAAY,CAAC;AAChG,QAAA,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG;QACtB,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,GAAG,IAAI,IAAI,IAAI,GAAG;AAE5D,QAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE;IACxD,CAAC;iFAAC;AAEF;;;AAGG;AACgB,IAAA,IAAI,GAAG,QAAQ,CAAe,MAAK;AACrD,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE;QACrD,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI,IAAI,EAAE;AAClC,YAAA,OAAO,SAAS;QACjB;QACA,OAAO,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM;IACxC,CAAC;6EAAC;;AAGiB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAA,CAAA,CAAG;iFAAC;;IAGxD,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA,CAAA,CAAG;kFAAC;;IAGtF,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAA,WAAA,EAAc,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;oFAAC;uGA7DzF,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,uwCChC9B,8FAGA,EAAA,MAAA,EAAA,CAAA,unCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FD6Ba,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAnB7B,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,cACT,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EAGzC;AACL,wBAAA,KAAK,EAAE,WAAW;AAClB,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,kBAAkB,EAAE,QAAQ;AAC5B,wBAAA,2BAA2B,EAAE,YAAY;AACzC,wBAAA,sBAAsB,EAAE,gBAAgB;AACxC,wBAAA,sBAAsB,EAAE,gBAAgB;AACxC,wBAAA,sBAAsB,EAAE,kBAAkB;AAC1C,wBAAA,uBAAuB,EAAE,aAAa;AACtC,wBAAA,mBAAmB,EAAE;AACrB,qBAAA,EAAA,QAAA,EAAA,8FAAA,EAAA,MAAA,EAAA,CAAA,unCAAA,CAAA,EAAA;;;AE3BF;;;;;;;;;;;;;;;AAeG;MAqBU,gBAAgB,CAAA;;IAEnB,KAAK,GAAG,KAAK,CAAS,CAAC;8EAAC;;IAGxB,GAAG,GAAG,KAAK,CAAS,CAAC;4EAAC;AAE/B;;;;AAIG;IACM,IAAI,GAAG,KAAK,CAA8B,SAAS;6EAAC;AAE7D;;;;AAIG;IACM,SAAS,GAAG,KAAK,CAA8B,SAAS;kFAAC;;IAGzD,UAAU,GAAG,KAAK,CAAgC,SAAS;mFAAC;;IAG5D,SAAS,GAAG,KAAK,CAAC,IAAI,iFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AAEjE;;;;AAIG;IACM,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;;IAGf,WAAW,GAAG,GAAG;;AAGjB,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAC3C,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;AACtB,QAAA,IAAI,GAAG,IAAI,CAAC,EAAE;AACb,YAAA,OAAO,CAAC;QACT;QACA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,CAAC,CAAC;IACpD,CAAC;iFAAC;AAEF;;;;AAIG;AACgB,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;qFAAC;;IAG3D,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,GAAG,GAAG;gFAAC;;IAG/C,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW;kFAAC;;AAG5C,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;mFAAC;;AAGrE,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA,CAAA,CAAG;qFAAC;;AAG/D,IAAA,IAAI,GAAG,QAAQ,CAAc,MAAK;AACpD,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE;QACpC,IAAI,CAAC,UAAU,EAAE;AAChB,YAAA,OAAO,SAAS;QACjB;AACA,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE;AAC1B,QAAA,IAAI,UAAU,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;AAC3D,YAAA,OAAO,KAAK;QACb;AACA,QAAA,IAAI,UAAU,CAAC,IAAI,KAAK,SAAS,IAAI,KAAK,IAAI,UAAU,CAAC,IAAI,EAAE;AAC9D,YAAA,OAAO,MAAM;QACd;AACA,QAAA,OAAO,SAAS;IACjB,CAAC;6EAAC;;IAGiB,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;oFAAC;;AAGhF,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gFAAC;;AAGvD,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;qFAAC;AAEpF;;;;AAIG;AACK,IAAA,WAAW,CAAC,SAAsC,EAAA;AACzD,QAAA,IAAI,SAAS,KAAK,SAAS,EAAE;AAC5B,YAAA,OAAO,IAAI;QACZ;AACA,QAAA,OAAO,OAAO,SAAS,KAAK,QAAQ,GAAG,CAAA,EAAG,SAAS,CAAA,EAAA,CAAI,GAAG,SAAS;IACpE;uGApGY,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,s0CCvC7B,klBAmBA,EAAA,MAAA,EAAA,CAAA,i/CAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDoBa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBApB5B,SAAS;+BACC,UAAU,EAAA,QAAA,EACV,UAAU,EAAA,UAAA,EACR,IAAI,mBACC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EAGzC;AACL,wBAAA,KAAK,EAAE,UAAU;AACjB,wBAAA,IAAI,EAAE,OAAO;AACb,wBAAA,SAAS,EAAE,eAAe;AAC1B,wBAAA,yBAAyB,EAAE,WAAW;AACtC,wBAAA,8BAA8B,EAAE,gBAAgB;AAChD,wBAAA,sBAAsB,EAAE,GAAG;AAC3B,wBAAA,sBAAsB,EAAE,OAAO;AAC/B,wBAAA,sBAAsB,EAAE,gBAAgB;AACxC,wBAAA,uBAAuB,EAAE,gBAAgB;AACzC,wBAAA,mBAAmB,EAAE;AACrB,qBAAA,EAAA,QAAA,EAAA,klBAAA,EAAA,MAAA,EAAA,CAAA,i/CAAA,CAAA,EAAA;;;AErCF;;AAEG;AAEH;;ACJA;;AAEG;;;;"}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "ng-hub-ui-metrics",
-  "version": "22.4.0",
+  "version": "22.4.2",
   "license": "MIT",
   "description": "Read-only value visualizations (progress, meter, gauge/ring) for Angular 21+, part of the ng-hub-ui family.",
   "author": "Carlos Morcillo <carlos.morcillo@me.com> (https://www.carlosmorcillo.com)",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/carlos-morcillo/ng-hub-ui-metrics.git"
+    "url": "git+https://github.com/hub-env/ng-hub-ui-metrics.git"
   },
   "bugs": {
-    "url": "https://github.com/carlos-morcillo/ng-hub-ui-metrics/issues",
+    "url": "https://github.com/hub-env/hub-ui/issues",
     "email": "carlos.morcillo@me.com"
   },
   "homepage": "https://hubui.dev/en/metrics/overview/",

package/types/ng-hub-ui-metrics.d.ts

@@ -222,6 +222,12 @@ declare class HubRingComponent {
     protected readonly PATH_LENGTH = 100;
     /** Completion ratio in `[0, 1]`; `0` when `max` is not positive. */
     protected readonly fraction: _angular_core.Signal<number>;
+    /**
+     * Value announced to assistive technology. The arc paints the clamped ratio, so
+     * reporting the raw input would put `aria-valuenow` outside the range it is
+     * measured against the moment a caller overshoots `max`.
+     */
+    protected readonly ariaValueNow: _angular_core.Signal<number>;
     /** Completion as a `0..100` percentage. */
     protected readonly percent: _angular_core.Signal<number>;
     /** Dash pattern for the indicator (the full normalized path). */