ng-hub-ui-metrics 22.2.1 → 22.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -10,11 +10,11 @@ Read-only value visualizations for Angular 21+ — a linear **progress** bar, a
|
|
|
10
10
|
|
|
11
11
|
## Documentation and Live Examples
|
|
12
12
|
|
|
13
|
-
This package is part of [Hub UI](https://hubui.dev/), a collection of Angular component libraries for standalone apps.
|
|
13
|
+
This package is part of [Hub UI](https://hubui.dev/en/), a collection of Angular component libraries for standalone apps.
|
|
14
14
|
|
|
15
|
-
- Docs: https://hubui.dev/metrics/overview/
|
|
16
|
-
- Live examples: https://hubui.dev/metrics/examples/
|
|
17
|
-
- Hub UI: https://hubui.dev/
|
|
15
|
+
- Docs: https://hubui.dev/en/metrics/overview/
|
|
16
|
+
- Live examples: https://hubui.dev/en/metrics/examples/
|
|
17
|
+
- Hub UI: https://hubui.dev/en/
|
|
18
18
|
|
|
19
19
|
## 🧩 Library Family `ng-hub-ui`
|
|
20
20
|
|
|
@@ -81,10 +81,10 @@ class HubProgressComponent {
|
|
|
81
81
|
.filter(Boolean)
|
|
82
82
|
.join(' '), /* @ts-ignore */
|
|
83
83
|
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
84
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
85
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
84
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
85
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HubProgressComponent, isStandalone: true, selector: "hub-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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": "progressbar" }, properties: { "class": "hostClasses()", "style.--hub-progress-accent": "accentVar()", "style.--hub-progress-value": "valueCss()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "ariaValueNow()", "attr.aria-label": "label() || null", "attr.aria-busy": "indeterminate() || null" }, classAttribute: "hub-progress" }, ngImport: i0, template: "@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", styles: [":where(.hub-progress){--hub-progress-accent: var(--hub-sys-color-primary, #0d6efd);--hub-progress-track-bg: color-mix(in oklch, var(--hub-progress-accent) 16%, transparent);--hub-progress-indicator-bg: var(--hub-progress-accent);--hub-progress-height: var(--hub-ref-space-2, .5rem);--hub-progress-radius: var(--hub-ref-radius-pill, 50rem)}.hub-progress{display:flex;align-items:center;gap:var(--hub-ref-space-2, .5rem);inline-size:100%}.hub-progress__label{flex:0 0 auto;color:var(--hub-sys-text-muted, #6c757d);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-progress__track{position:relative;flex:1 1 auto;block-size:var(--hub-progress-height);overflow:hidden;background:var(--hub-progress-track-bg);border-radius:var(--hub-progress-radius)}.hub-progress__indicator{display:block;inline-size:var(--hub-progress-value, 0%);block-size:100%;background:var(--hub-progress-indicator-bg);border-radius:inherit;transition:inline-size .3s ease}.hub-progress__value{flex:0 0 auto;min-inline-size:3ch;color:var(--hub-sys-text-primary, #212529);font-size:var(--hub-ref-font-size-sm, .875rem);font-weight:var(--hub-ref-font-weight-semibold, 600);text-align:end;font-variant-numeric:tabular-nums}.hub-progress--sm{--hub-progress-height: var(--hub-ref-space-1, .25rem)}.hub-progress--md{--hub-progress-height: var(--hub-ref-space-2, .5rem)}.hub-progress--lg{--hub-progress-height: var(--hub-ref-space-3, .75rem)}.hub-progress--indeterminate .hub-progress__indicator{inline-size:40%;transition:none;animation:hub-progress-indeterminate 1.4s ease-in-out infinite}@keyframes hub-progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media(prefers-reduced-motion:reduce){.hub-progress--indeterminate .hub-progress__indicator{animation-duration:3s}.hub-progress__indicator{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
86
86
|
}
|
|
87
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
87
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubProgressComponent, decorators: [{
|
|
88
88
|
type: Component,
|
|
89
89
|
args: [{ selector: 'hub-progress', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
90
90
|
class: 'hub-progress',
|
|
@@ -164,10 +164,10 @@ class HubMeterComponent {
|
|
|
164
164
|
/** Host modifier classes derived from the computed band. */
|
|
165
165
|
hostClasses = computed(() => ['hub-meter', `hub-meter--${this.band()}`].join(' '), /* @ts-ignore */
|
|
166
166
|
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
167
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
168
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
167
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubMeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
168
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: HubMeterComponent, isStandalone: true, selector: "hub-meter", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, low: { classPropertyName: "low", publicName: "low", isSignal: true, isRequired: false, transformFunction: null }, high: { classPropertyName: "high", publicName: "high", isSignal: true, isRequired: false, transformFunction: null }, optimum: { classPropertyName: "optimum", publicName: "optimum", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "meter" }, properties: { "class": "hostClasses()", "attr.data-band": "band()", "style.--hub-meter-value": "valueCss()", "attr.aria-valuemin": "resolved().min", "attr.aria-valuemax": "resolved().max", "attr.aria-valuenow": "resolved().value", "attr.aria-valuetext": "valueText()" }, classAttribute: "hub-meter" }, ngImport: i0, template: "<span class=\"hub-meter__track\">\n\t<span class=\"hub-meter__indicator\"></span>\n</span>\n", styles: [":where(.hub-meter){--hub-meter-track-bg: color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 16%, transparent);--hub-meter-low-bg: var(--hub-sys-color-danger, #dc3545);--hub-meter-optimum-bg: var(--hub-sys-color-success, #198754);--hub-meter-high-bg: var(--hub-sys-color-warning, #ffc107);--hub-meter-height: var(--hub-ref-space-2, .5rem);--hub-meter-radius: var(--hub-ref-radius-pill, 50rem);--hub-meter-fill: var(--hub-meter-optimum-bg)}.hub-meter{display:block;inline-size:100%}.hub-meter__track{position:relative;display:block;block-size:var(--hub-meter-height);overflow:hidden;background:var(--hub-meter-track-bg);border-radius:var(--hub-meter-radius)}.hub-meter__indicator{display:block;inline-size:var(--hub-meter-value, 0%);block-size:100%;background:var(--hub-meter-fill);border-radius:inherit;transition:inline-size .3s ease,background-color .3s ease}.hub-meter--low{--hub-meter-fill: var(--hub-meter-low-bg)}.hub-meter--optimum{--hub-meter-fill: var(--hub-meter-optimum-bg)}.hub-meter--high{--hub-meter-fill: var(--hub-meter-high-bg)}@media(prefers-reduced-motion:reduce){.hub-meter__indicator{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
169
169
|
}
|
|
170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubMeterComponent, decorators: [{
|
|
171
171
|
type: Component,
|
|
172
172
|
args: [{ selector: 'hub-meter', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
173
173
|
class: 'hub-meter',
|
|
@@ -267,10 +267,10 @@ class HubRingComponent {
|
|
|
267
267
|
toCssLength(dimension) {
|
|
268
268
|
return typeof dimension === 'number' ? `${dimension}px` : dimension;
|
|
269
269
|
}
|
|
270
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
271
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
270
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
271
|
+
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 } }, 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": "displayValue()" }, 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(.hub-ring){--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)}.hub-ring{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}.hub-ring--low{--hub-ring-indicator: var(--hub-ring-low-color)}.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, encapsulation: i0.ViewEncapsulation.None });
|
|
272
272
|
}
|
|
273
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HubRingComponent, decorators: [{
|
|
274
274
|
type: Component,
|
|
275
275
|
args: [{ selector: 'hub-ring', exportAs: 'hubGauge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
276
276
|
class: 'hub-ring',
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ng-hub-ui-metrics",
|
|
3
|
-
"version": "22.2.
|
|
3
|
+
"version": "22.2.2",
|
|
4
4
|
"description": "Read-only value visualizations (progress, meter, gauge/ring) for Angular 21+, part of the ng-hub-ui family.",
|
|
5
5
|
"author": "Carlos Morcillo <carlos.morcillo@me.com> (https://www.carlosmorcillo.com)",
|
|
6
6
|
"repository": {
|
|
Binary file
|