@forgeroute/ui 0.3.12 → 0.3.13

package/fesm2022/forgeroute-ui.mjs

@@ -11345,6 +11345,278 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var ProgressRingComponent = class ProgressRingComponent {
+	constructor() {
+		this.value = input(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.max = input(100, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+		this.size = input(58, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.strokeWidth = input(5, ...ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []);
+		this.variant = input(null, ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.showValue = input(true, ...ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.ariaLabelledby = input("", ...ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []);
+		this.valueText = input("", ...ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []);
+		this.safeMax = computed(() => {
+			const m = this.max();
+			return Number.isFinite(m) && m > 0 ? m : 0;
+		}, ...ngDevMode ? [{ debugName: "safeMax" }] : /* istanbul ignore next */ []);
+		this.clampedValue = computed(() => {
+			const v = this.value();
+			return Math.min(Math.max(Number.isNaN(v) ? 0 : v, 0), this.safeMax());
+		}, ...ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []);
+		this.exact = computed(() => this.safeMax() > 0 ? this.clampedValue() / this.safeMax() * 100 : 0, ...ngDevMode ? [{ debugName: "exact" }] : /* istanbul ignore next */ []);
+		this.percent = computed(() => Math.round(this.exact()), ...ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []);
+		this.center = computed(() => this.size() / 2, ...ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []);
+		this.radius = computed(() => Math.max((this.size() - this.strokeWidth()) / 2, 0), ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
+		this.circumference = computed(() => 2 * Math.PI * this.radius(), ...ngDevMode ? [{ debugName: "circumference" }] : /* istanbul ignore next */ []);
+		this.dashOffset = computed(() => this.circumference() * (1 - this.exact() / 100), ...ngDevMode ? [{ debugName: "dashOffset" }] : /* istanbul ignore next */ []);
+		this.effectiveVariant = computed(() => {
+			const fixed = this.variant();
+			if (fixed) return fixed;
+			const e = this.exact();
+			return e <= 25 ? "red" : e <= 50 ? "amber" : e <= 75 ? "blue" : "green";
+		}, ...ngDevMode ? [{ debugName: "effectiveVariant" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ProgressRingComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ProgressRingComponent,
+			isStandalone: true,
+			selector: "ui-progress-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
+				},
+				strokeWidth: {
+					classPropertyName: "strokeWidth",
+					publicName: "strokeWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				variant: {
+					classPropertyName: "variant",
+					publicName: "variant",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showValue: {
+					classPropertyName: "showValue",
+					publicName: "showValue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabelledby: {
+					classPropertyName: "ariaLabelledby",
+					publicName: "ariaLabelledby",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				valueText: {
+					classPropertyName: "valueText",
+					publicName: "valueText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			ngImport: i0,
+			template: `
+    <div class="pr"
+         role="progressbar"
+         [style.width.px]="size()"
+         [style.height.px]="size()"
+         [attr.aria-valuemin]="0"
+         [attr.aria-valuemax]="safeMax()"
+         [attr.aria-valuenow]="clampedValue()"
+         [attr.aria-valuetext]="valueText() || null"
+         [attr.aria-labelledby]="ariaLabelledby() || null"
+         [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() || null)">
+      <svg [attr.width]="size()" [attr.height]="size()" [attr.viewBox]="'0 0 ' + size() + ' ' + size()" aria-hidden="true" focusable="false">
+        <circle class="pr-track" [attr.cx]="center()" [attr.cy]="center()" [attr.r]="radius()" fill="none" [attr.stroke-width]="strokeWidth()" />
+        <circle [class]="'pr-arc pr-' + effectiveVariant()" [attr.cx]="center()" [attr.cy]="center()" [attr.r]="radius()" fill="none"
+                [attr.stroke-width]="strokeWidth()" stroke-linecap="round"
+                [attr.stroke-dasharray]="circumference()" [attr.stroke-dashoffset]="dashOffset()"
+                [attr.transform]="'rotate(-90 ' + center() + ' ' + center() + ')'" />
+      </svg>
+      @if (showValue()) {
+        <span class="pr-value" [style.font-size.px]="size() * 0.21">{{ label() || percent() + '%' }}</span>
+      }
+    </div>
+  `,
+			isInline: true,
+			styles: [":host{display:inline-block;line-height:0}.pr{position:relative;display:inline-flex;align-items:center;justify-content:center}.pr svg{position:absolute;inset:0}.pr-track{stroke:#e2e8f0}.pr-arc{transition:stroke-dashoffset .8s ease}@media(prefers-reduced-motion:reduce){.pr-arc{transition:none}}.pr-blue{stroke:#3b82f6}.pr-green{stroke:#16a34a}.pr-amber{stroke:#f59e0b}.pr-red{stroke:#ef4444}.pr-slate{stroke:#94a3b8}.pr-sky{stroke:#0ea5e9}@media(forced-colors:active){.pr-track{stroke:CanvasText;opacity:.35}.pr-arc{stroke:Highlight}}.pr-value{position:relative;font-weight:700;line-height:1;color:#1e293b}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ProgressRingComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-progress-ring",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <div class="pr"
+         role="progressbar"
+         [style.width.px]="size()"
+         [style.height.px]="size()"
+         [attr.aria-valuemin]="0"
+         [attr.aria-valuemax]="safeMax()"
+         [attr.aria-valuenow]="clampedValue()"
+         [attr.aria-valuetext]="valueText() || null"
+         [attr.aria-labelledby]="ariaLabelledby() || null"
+         [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() || null)">
+      <svg [attr.width]="size()" [attr.height]="size()" [attr.viewBox]="'0 0 ' + size() + ' ' + size()" aria-hidden="true" focusable="false">
+        <circle class="pr-track" [attr.cx]="center()" [attr.cy]="center()" [attr.r]="radius()" fill="none" [attr.stroke-width]="strokeWidth()" />
+        <circle [class]="'pr-arc pr-' + effectiveVariant()" [attr.cx]="center()" [attr.cy]="center()" [attr.r]="radius()" fill="none"
+                [attr.stroke-width]="strokeWidth()" stroke-linecap="round"
+                [attr.stroke-dasharray]="circumference()" [attr.stroke-dashoffset]="dashOffset()"
+                [attr.transform]="'rotate(-90 ' + center() + ' ' + center() + ')'" />
+      </svg>
+      @if (showValue()) {
+        <span class="pr-value" [style.font-size.px]="size() * 0.21">{{ label() || percent() + '%' }}</span>
+      }
+    </div>
+  `,
+			styles: [":host{display:inline-block;line-height:0}.pr{position:relative;display:inline-flex;align-items:center;justify-content:center}.pr svg{position:absolute;inset:0}.pr-track{stroke:#e2e8f0}.pr-arc{transition:stroke-dashoffset .8s ease}@media(prefers-reduced-motion:reduce){.pr-arc{transition:none}}.pr-blue{stroke:#3b82f6}.pr-green{stroke:#16a34a}.pr-amber{stroke:#f59e0b}.pr-red{stroke:#ef4444}.pr-slate{stroke:#94a3b8}.pr-sky{stroke:#0ea5e9}@media(forced-colors:active){.pr-track{stroke:CanvasText;opacity:.35}.pr-arc{stroke:Highlight}}.pr-value{position:relative;font-weight:700;line-height:1;color:#1e293b}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		strokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeWidth",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		showValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValue",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledby",
+				required: false
+			}]
+		}],
+		valueText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueText",
+				required: false
+			}]
+		}]
+	}
+});
 var AudioPlayerComponent = class AudioPlayerComponent {
 	constructor() {
 		this.src = input("", ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
@@ -33167,6 +33439,14 @@ var KpiCardComponent = class KpiCardComponent {
 		this.highlight = input(false, ...ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []);
 		this.clickable = input(false, ...ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []);
 		this.valueColor = input("default", ...ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []);
+		this.progress = input(null, ...ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []);
+		this.progressMax = input(100, ...ngDevMode ? [{ debugName: "progressMax" }] : /* istanbul ignore next */ []);
+		this.progressSize = input(58, ...ngDevMode ? [{ debugName: "progressSize" }] : /* istanbul ignore next */ []);
+		this.progressStrokeWidth = input(5, ...ngDevMode ? [{ debugName: "progressStrokeWidth" }] : /* istanbul ignore next */ []);
+		this.progressVariant = input(null, ...ngDevMode ? [{ debugName: "progressVariant" }] : /* istanbul ignore next */ []);
+		this.progressAriaLabel = input("", ...ngDevMode ? [{ debugName: "progressAriaLabel" }] : /* istanbul ignore next */ []);
+		this.progressValueText = input("", ...ngDevMode ? [{ debugName: "progressValueText" }] : /* istanbul ignore next */ []);
+		this.hasProgress = computed(() => this.progress() !== null && this.progress() !== void 0, ...ngDevMode ? [{ debugName: "hasProgress" }] : /* istanbul ignore next */ []);
 		this.iconSvg = computed(() => {
 			const svg = KPI_ICONS[this.icon()];
 			return svg ? this.sanitizer.bypassSecurityTrustHtml(svg) : null;
@@ -33250,6 +33530,55 @@ var KpiCardComponent = class KpiCardComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				progress: {
+					classPropertyName: "progress",
+					publicName: "progress",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressMax: {
+					classPropertyName: "progressMax",
+					publicName: "progressMax",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressSize: {
+					classPropertyName: "progressSize",
+					publicName: "progressSize",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressStrokeWidth: {
+					classPropertyName: "progressStrokeWidth",
+					publicName: "progressStrokeWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressVariant: {
+					classPropertyName: "progressVariant",
+					publicName: "progressVariant",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressAriaLabel: {
+					classPropertyName: "progressAriaLabel",
+					publicName: "progressAriaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				progressValueText: {
+					classPropertyName: "progressValueText",
+					publicName: "progressValueText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			host: {
@@ -33268,20 +33597,46 @@ var KpiCardComponent = class KpiCardComponent {
       @if (iconSvg()) {
         <div [class]="'kpi-icon ' + color() + '-icon'" aria-hidden="true" [innerHTML]="iconSvg()"></div>
       }
-      <span class="kpi-label">{{ label() }}</span>
+      @if (hasProgress()) {
+        <div class="kpi-top">
+          <span class="kpi-label">{{ label() }}</span>
+          <ui-progress-ring class="kpi-ring" [value]="progress()!" [max]="progressMax()" [size]="progressSize()" [strokeWidth]="progressStrokeWidth()"
+                            [variant]="progressVariant()" [ariaLabel]="progressAriaLabel() || (label() + ' progress')" [valueText]="progressValueText()" />
+        </div>
+      } @else {
+        <span class="kpi-label">{{ label() }}</span>
+      }
       <span class="kpi-value"
             [class.green-value]="highlight() || valueColor() === 'green'"
             [class.blue-value]="valueColor() === 'blue'">{{ value() }}</span>
       @if (subtitle()) {
         <span class="kpi-subtitle">{{ subtitle() }}</span>
       }
+      <ng-content select="[kpi-footer]" />
       @if (clickable()) {
         <svg class="kpi-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
       }
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"],
+			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}.kpi-ring{flex-shrink:0}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"],
+			dependencies: [{
+				kind: "component",
+				type: ProgressRingComponent,
+				selector: "ui-progress-ring",
+				inputs: [
+					"value",
+					"max",
+					"size",
+					"strokeWidth",
+					"variant",
+					"label",
+					"showValue",
+					"ariaLabel",
+					"ariaLabelledby",
+					"valueText"
+				]
+			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -33296,6 +33651,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-kpi-card",
 			standalone: true,
+			imports: [ProgressRingComponent],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				"[attr.role]": "clickable() ? \"button\" : null",
@@ -33308,19 +33664,28 @@ i0.ɵɵngDeclareClassMetadata({
       @if (iconSvg()) {
         <div [class]="'kpi-icon ' + color() + '-icon'" aria-hidden="true" [innerHTML]="iconSvg()"></div>
       }
-      <span class="kpi-label">{{ label() }}</span>
+      @if (hasProgress()) {
+        <div class="kpi-top">
+          <span class="kpi-label">{{ label() }}</span>
+          <ui-progress-ring class="kpi-ring" [value]="progress()!" [max]="progressMax()" [size]="progressSize()" [strokeWidth]="progressStrokeWidth()"
+                            [variant]="progressVariant()" [ariaLabel]="progressAriaLabel() || (label() + ' progress')" [valueText]="progressValueText()" />
+        </div>
+      } @else {
+        <span class="kpi-label">{{ label() }}</span>
+      }
       <span class="kpi-value"
             [class.green-value]="highlight() || valueColor() === 'green'"
             [class.blue-value]="valueColor() === 'blue'">{{ value() }}</span>
       @if (subtitle()) {
         <span class="kpi-subtitle">{{ subtitle() }}</span>
       }
+      <ng-content select="[kpi-footer]" />
       @if (clickable()) {
         <svg class="kpi-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
       }
     </div>
   `,
-			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"]
+			styles: [":host{display:block;height:100%}.kpi-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0;height:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}:host(:focus){outline:none}:host(:focus-visible) .kpi-card{outline:2px solid #3b82f6;outline-offset:2px}.kpi-card.clickable{cursor:pointer}.kpi-card.clickable:hover{border-color:#93c5fd;box-shadow:0 2px 8px #3b82f614}.kpi-card.clickable:hover .kpi-arrow{color:#3b82f6;transform:translate(2px)}.kpi-arrow{position:absolute;bottom:14px;right:14px;color:#94a3b8;transition:color .15s ease,transform .15s ease}.kpi-icon{flex-shrink:0;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.green-icon{background:#dcfce7;color:#16a34a}.blue-icon{background:#dbeafe;color:#2563eb}.amber-icon{background:#fef3c7;color:#d97706}.orange-icon{background:#ffedd5;color:#c2410c}.red-icon{background:#fee2e2;color:#dc2626}.slate-icon{background:#f1f5f9;color:#475569}.kpi-label{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-height:36px;margin-bottom:4px}.kpi-ring{flex-shrink:0}.kpi-value{font-size:1.5rem;font-weight:700;color:#111827;line-height:1.1}.kpi-value.green-value{color:#16a34a}.kpi-value.blue-value{color:#3b82f6}.kpi-subtitle{font-size:.75rem;color:#64748b;margin-top:2px}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -33387,6 +33752,62 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "valueColor",
 				required: false
 			}]
+		}],
+		progress: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progress",
+				required: false
+			}]
+		}],
+		progressMax: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressMax",
+				required: false
+			}]
+		}],
+		progressSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressSize",
+				required: false
+			}]
+		}],
+		progressStrokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressStrokeWidth",
+				required: false
+			}]
+		}],
+		progressVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressVariant",
+				required: false
+			}]
+		}],
+		progressAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressAriaLabel",
+				required: false
+			}]
+		}],
+		progressValueText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "progressValueText",
+				required: false
+			}]
 		}]
 	}
 });
@@ -37386,6 +37807,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_DOCUMENT_SUBJECT, DEFAULT_SIGNING_OPTIONS, DOCUMENT_PROVIDER_OPTIONS, DOCUMENT_PURPOSE_OPTIONS, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DocumentMergeCheckComponent, DocumentSendOptionsComponent, DocumentSignersComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, MAX_CC, MERGE_CHECK_DEBOUNCE_MS, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PaginationComponent, PanelInfoListComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SIGNER_ROLES, SIGNER_ROLE_LABEL_DEFAULT, SIGNING_LIMITS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SendMessagePanelComponent, SidePanelComponent, SkeletonComponent, SortableItemDirective, SortableListComponent, StackComponent, StepperComponent, TableToolbarComponent, TemplatePickerComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, VideoPickerComponent, acceptLabel, appShellGroupsStorageKey, appendVideoLink, applyVideoLine, autoVariant, buildDefaultSchedule, buildSigners, buildVideoLink, builtInActionIcon, businessTimeOptions, countersignLine, countersignPlaceLabel, createFieldReveal, decodeFilterValues, describeDocumentSigners, digitsOnly, effectiveRoles, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, forwardContext, getEligibleIds, getEligibleOptions, getErrorMessage, hasMappedDataFields, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, mergeFieldText, mergeWarningLines, messagePreviewHtml, normalizeHexColor, normalizeRoles, parseBizHours, parseCcList, parseIso, parseTime, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, roleNumber, sendExistingEnvelope, serializeBizHours, signerProblems, signerRoleLabel, stripVideoLink, suggestDocumentSubject, videoMessageLine };
+export { ActionBarComponent, AlertComponent, AppShellComponent, AudioPlayerComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarRowComponent, BulkMessagePanelComponent, BusinessHoursComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipGroupComponent, ColorInputComponent, ColumnFilterComponent, ColumnsComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_DOCUMENT_SUBJECT, DEFAULT_SIGNING_OPTIONS, DOCUMENT_PROVIDER_OPTIONS, DOCUMENT_PURPOSE_OPTIONS, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DocumentMergeCheckComponent, DocumentSendOptionsComponent, DocumentSignersComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormRowComponent, FormSectionComponent, HintComponent, IconComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, LAYOUT_GAP_PX, ListComponent, ListItemComponent, MAX_CC, MERGE_CHECK_DEBOUNCE_MS, ModalComponent, MoreMenuComponent, MultiSelectComponent, PHONE_NUMBER_AREA_CODE_LENGTH, PHONE_NUMBER_ZIP_LENGTH, PaginationComponent, PanelInfoListComponent, PhoneNumberPickerComponent, PillTabsComponent, ProgressBarComponent, ProgressRingComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, ReadonlyFieldsetComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SIGNER_ROLES, SIGNER_ROLE_LABEL_DEFAULT, SIGNING_LIMITS, SearchInputComponent, SectionHeaderComponent, SelectComponent, SendMessagePanelComponent, SidePanelComponent, SkeletonComponent, SortableItemDirective, SortableListComponent, StackComponent, StepperComponent, TableToolbarComponent, TemplatePickerComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, ToastComponent, ToastService, ToggleBadgeComponent, ToggleComponent, TooltipDirective, US_STATES, UiFieldValidity, VideoPickerComponent, acceptLabel, appShellGroupsStorageKey, appendVideoLink, applyVideoLine, autoVariant, buildDefaultSchedule, buildSigners, buildVideoLink, builtInActionIcon, businessTimeOptions, countersignLine, countersignPlaceLabel, createFieldReveal, decodeFilterValues, describeDocumentSigners, digitsOnly, effectiveRoles, encodeFilterValue, encodeFilterValues, errorContextInterceptor, fileMatchesAccept, formatFileSize, formatIsoDate, formatIsoDateTime, formatTime, forwardContext, getEligibleIds, getEligibleOptions, getErrorMessage, hasMappedDataFields, humanReadableMessage, iconPath, isoKey, issueToErrors, maxLengthIssue, mergeFieldText, mergeWarningLines, messagePreviewHtml, normalizeHexColor, normalizeRoles, parseBizHours, parseCcList, parseIso, parseTime, pluralize, provideForgerouteToast, reorderItems, requiredIssue, resolveLayoutGap, resolvePreset, roleNumber, sendExistingEnvelope, serializeBizHours, signerProblems, signerRoleLabel, stripVideoLink, suggestDocumentSubject, videoMessageLine };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map