ud-components 0.3.13 → 0.3.14

package/fesm2022/ud-components.mjs

@@ -1,5 +1,5 @@
 import * as i1$3 from '@angular/common';
-import { CommonModule, formatDate, NgClass, AsyncPipe, NgStyle, DatePipe, NgTemplateOutlet, NgSwitch } from '@angular/common';
+import { CommonModule, formatDate, NgClass, AsyncPipe, NgStyle, DatePipe, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { ViewChild, Input, CUSTOM_ELEMENTS_SCHEMA, Component, Inject, Pipe, Injectable, inject, DestroyRef, EventEmitter, TemplateRef, ContentChild, Output, ViewContainerRef, Directive, ContentChildren, HostBinding, input, effect, ViewChildren, forwardRef } from '@angular/core';
 import * as i1 from '@angular/forms';
@@ -2507,6 +2507,14 @@ var KpiPillType;
     KpiPillType["DANGER"] = "danger";
     KpiPillType["INFO"] = "info";
 })(KpiPillType || (KpiPillType = {}));
+var KpiVariant;
+(function (KpiVariant) {
+    KpiVariant["ICON_BADGE"] = "icon-badge";
+    KpiVariant["TOP_BAR"] = "top-bar";
+    KpiVariant["FILLED_TOP"] = "filled-top";
+    KpiVariant["DARK_CARD"] = "dark-card";
+    KpiVariant["MINIMAL"] = "minimal";
+})(KpiVariant || (KpiVariant = {}));
 var IconColor;
 (function (IconColor) {
     IconColor["PURPLE"] = "purple";
@@ -2514,6 +2522,7 @@ var IconColor;
     IconColor["GREEN"] = "green";
     IconColor["BLUE"] = "blue";
     IconColor["RED"] = "red";
+    IconColor["NAVY"] = "navy";
 })(IconColor || (IconColor = {}));
 
 class PillComponent {
@@ -2563,6 +2572,8 @@ class KpiComponent {
     icon;
     iconColor;
     titleRef;
+    loading = false;
+    variant = KpiVariant.ICON_BADGE;
     getProgressData() {
         return this.data;
     }
@@ -2576,24 +2587,38 @@ class KpiComponent {
     getTextData() {
         return this.data;
     }
+    getTrendIcon(trendValue) {
+        if (trendValue > 0)
+            return 'arrow_upward';
+        if (trendValue < 0)
+            return 'arrow_downward';
+        return 'remove';
+    }
+    getTrendColor(trendValue) {
+        if (trendValue > 0)
+            return 'trend-up';
+        if (trendValue < 0)
+            return 'trend-down';
+        return 'trend-neutral';
+    }
     KpiDataType = KpiDataType;
     KpiProgressBarType = KpiProgressBarType;
+    KpiVariant = KpiVariant;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KpiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KpiComponent, isStandalone: true, selector: "ud-kpi", inputs: { title: "title", subtitle: "subtitle", dataType: "dataType", data: "data", icon: "icon", iconColor: "iconColor", titleRef: "titleRef" }, ngImport: i0, template: "<mat-card class=\"kpi-card\" [ngClass]=\"iconColor\" appearance=\"outlined\">\n  <div class=\"kpi-header\">\n    <div class=\"kpi-icon\">\n      <mat-icon>{{ icon }}</mat-icon>\n    </div>\n    <div class=\"kpi-title-section\">\n      <span class=\"kpi-label\">\n        @if (titleRef) {\n          <a [routerLink]=\"titleRef\">{{ title }}</a>\n        } @else {\n          {{ title }}\n        }\n      </span>\n      @if (subtitle) {\n        <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n      }\n    </div>\n  </div>\n\n  <div class=\"kpi-content\">\n    <div [ngSwitch]=\"dataType\">\n      @switch (dataType) {\n        @case (KpiDataType.PROGRESS_BAR) {\n          <div class=\"progress-section\">\n            @if (getProgressData().type === KpiProgressBarType.PERCENTAGE) {\n              <div class=\"value-display\">\n                <span class=\"kpi-value\">{{\n                  getProgressData().data.value\n                }}</span>\n                <span class=\"value-unit\">%</span>\n              </div>\n            } @else if (\n              getProgressData().type === KpiProgressBarType.DIVISION\n            ) {\n              <div class=\"value-display\">\n                <span class=\"kpi-value\">{{\n                  getProgressData().data.value\n                }}</span>\n                <span class=\"value-separator\">/</span>\n                <span class=\"value-max\">{{ getProgressData().data.max }}</span>\n              </div>\n            }\n            <ud-progress-bar\n              [value]=\"getProgressBarValue()\"></ud-progress-bar>\n          </div>\n        }\n        @case (KpiDataType.PILLS) {\n          <div class=\"pills-section\">\n            <span class=\"kpi-value\">{{ getPillData().value }}</span>\n            <div class=\"pills-container\">\n              @for (pill of getPillData().pills; track pill) {\n                <ud-pill\n                  [text]=\"pill.value + ' ' + (pill.label | async | capitalize)\"\n                  [type]=\"pill.type\"></ud-pill>\n              }\n            </div>\n          </div>\n        }\n        @case (KpiDataType.TEXT) {\n          <div class=\"text-section\">\n            <span class=\"kpi-value\">{{ getTextData().value }}</span>\n            @if (getTextData().unit) {\n              <span class=\"value-unit\">{{ getTextData().unit }}</span>\n            }\n            <ng-content></ng-content>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</mat-card>\n", styles: [".kpi-card{padding:1.5rem;border-radius:15px;transition:all .2s ease;display:flex;flex-direction:column;gap:1rem;min-width:280px}.kpi-card:hover{box-shadow:0 4px 12px #00000014;transform:translateY(-2px)}.kpi-card .kpi-header{display:flex;gap:1rem;align-items:flex-start}.kpi-card .kpi-header .kpi-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}.kpi-card .kpi-header .kpi-icon ::ng-deep mat-icon{font-size:28px;width:28px;height:28px}.kpi-card .kpi-header .kpi-title-section{display:flex;flex-direction:column;gap:.25rem;flex:1}.kpi-card .kpi-header .kpi-title-section .kpi-label{font-size:.875rem;color:#6b7280;font-weight:500}.kpi-card .kpi-header .kpi-title-section .kpi-label a{color:#3b82f6;text-decoration:none;transition:color .2s ease}.kpi-card .kpi-header .kpi-title-section .kpi-label a:hover{color:#2563eb;text-decoration:underline}.kpi-card .kpi-header .kpi-title-section .kpi-subtitle{font-size:.75rem;color:#9ca3af;font-weight:500}.kpi-card .kpi-content .progress-section{display:flex;flex-direction:column;gap:.75rem}.kpi-card .kpi-content .progress-section .value-display{display:flex;align-items:baseline;gap:.25rem}.kpi-card .kpi-content .progress-section .value-display .kpi-value{font-size:1.875rem;font-weight:700;color:#111827;line-height:1.2}.kpi-card .kpi-content .progress-section .value-display .value-unit{font-size:1rem;color:#9ca3af;font-weight:500}.kpi-card .kpi-content .progress-section .value-display .value-separator{font-size:1.5rem;color:#d1d5db;font-weight:600}.kpi-card .kpi-content .progress-section .value-display .value-max{font-size:1.25rem;color:#6b7280;font-weight:600}.kpi-card .kpi-content .pills-section{display:flex;flex-direction:column;gap:.75rem}.kpi-card .kpi-content .pills-section .kpi-value{font-size:1.875rem;font-weight:700;color:#111827;line-height:1.2}.kpi-card .kpi-content .pills-section .pills-container{display:flex;gap:.5rem;flex-wrap:wrap}.kpi-card .kpi-content .text-section{display:flex;flex-direction:column;gap:.5rem}.kpi-card .kpi-content .text-section .kpi-value{font-size:1.875rem;font-weight:700;color:#111827;line-height:1.2}.kpi-card .kpi-content .text-section .value-unit{font-size:.875rem;color:#6b7280;font-weight:500;margin-top:.25rem}.kpi-card.purple .kpi-icon{background:linear-gradient(135deg,#e0e7ff,#c7d2fe)}.kpi-card.purple .kpi-icon ::ng-deep mat-icon{color:#4338ca}.kpi-card.amber .kpi-icon{background:linear-gradient(135deg,#fef3c7,#fde68a)}.kpi-card.amber .kpi-icon ::ng-deep mat-icon{color:#d97706}.kpi-card.green .kpi-icon{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}.kpi-card.green .kpi-icon ::ng-deep mat-icon{color:#059669}.kpi-card.blue .kpi-icon{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}.kpi-card.blue .kpi-icon ::ng-deep mat-icon{color:#1e40af}.kpi-card.red .kpi-icon{background:linear-gradient(135deg,#fee2e2,#fecaca)}.kpi-card.red .kpi-icon ::ng-deep mat-icon{color:#dc2626}@media (max-width: 1280px){.kpi-card{min-width:240px}}@media (max-width: 768px){.kpi-card{min-width:100%}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ProgressBarComponent, selector: "ud-progress-bar", inputs: ["value", "height", "borderRadius", "backgroundColor"] }, { kind: "component", type: PillComponent, selector: "ud-pill", inputs: ["text", "type"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: KpiComponent, isStandalone: true, selector: "ud-kpi", inputs: { title: "title", subtitle: "subtitle", dataType: "dataType", data: "data", icon: "icon", iconColor: "iconColor", titleRef: "titleRef", loading: "loading", variant: "variant" }, ngImport: i0, template: "<div class=\"kpi-card\" [ngClass]=\"[iconColor, variant, loading ? 'is-loading' : '']\">\n\n  <div class=\"kpi-body\">\n    @if (loading) {\n      <div class=\"skeleton-block skeleton-label\"></div>\n      <div class=\"skeleton-block skeleton-value\"></div>\n      <div class=\"skeleton-block skeleton-sub\"></div>\n    } @else {\n\n      <!-- filled-top / dark-card: header is the tinted strip -->\n      @if (variant === KpiVariant.FILLED_TOP || variant === KpiVariant.DARK_CARD) {\n        <div class=\"kpi-filled-header\">\n          <div class=\"kpi-icon-wrap\">\n            <mat-icon>{{ icon }}</mat-icon>\n          </div>\n          <div class=\"kpi-title-section\">\n            <span class=\"kpi-label\">\n              @if (titleRef) {\n                <a [routerLink]=\"titleRef\">{{ title }}</a>\n              } @else {\n                {{ title }}\n              }\n            </span>\n            @if (subtitle) {\n              <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </div>\n        <div class=\"kpi-content\">\n          <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n        </div>\n      } @else {\n        <!-- Standard header (icon-badge, top-bar, minimal) -->\n        <div class=\"kpi-header\">\n          <div class=\"kpi-icon-wrap\">\n            <mat-icon>{{ icon }}</mat-icon>\n          </div>\n          <div class=\"kpi-title-section\">\n            <span class=\"kpi-label\">\n              @if (titleRef) {\n                <a [routerLink]=\"titleRef\">{{ title }}</a>\n              } @else {\n                {{ title }}\n              }\n            </span>\n            @if (subtitle) {\n              <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </div>\n        <div class=\"kpi-content\">\n          <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n        </div>\n      }\n\n    }\n  </div>\n</div>\n\n<!-- Shared content template -->\n<ng-template #contentTpl>\n  @switch (dataType) {\n    @case (KpiDataType.PROGRESS_BAR) {\n      <div class=\"progress-section\">\n        @if (getProgressData().type === KpiProgressBarType.PERCENTAGE) {\n          <div class=\"value-display\">\n            <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n            <span class=\"value-unit\">%</span>\n          </div>\n        } @else if (getProgressData().type === KpiProgressBarType.DIVISION) {\n          <div class=\"value-display\">\n            <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n            <span class=\"value-separator\">/</span>\n            <span class=\"value-max\">{{ getProgressData().data.max }}</span>\n          </div>\n        }\n        <div class=\"progress-bar-track\">\n          <div class=\"progress-bar-fill\" [style.width.%]=\"getProgressBarValue()\"></div>\n        </div>\n        <ud-progress-bar [value]=\"getProgressBarValue()\" style=\"display:none\"></ud-progress-bar>\n      </div>\n    }\n    @case (KpiDataType.PILLS) {\n      <div class=\"pills-section\">\n        <div class=\"value-display\">\n          <span class=\"kpi-value\">{{ getPillData().value }}</span>\n        </div>\n        <div class=\"pills-container\">\n          @for (pill of getPillData().pills; track pill) {\n            <ud-pill [text]=\"pill.value + ' ' + (pill.label | async | capitalize)\" [type]=\"pill.type\"></ud-pill>\n          }\n        </div>\n      </div>\n    }\n    @case (KpiDataType.TEXT) {\n      <div class=\"text-section\">\n        <div class=\"value-display\">\n          <span class=\"kpi-value\">{{ getTextData().value }}</span>\n          @if (getTextData().unit) {\n            <span class=\"value-unit\">{{ getTextData().unit }}</span>\n          }\n        </div>\n        @if (getTextData().trend) {\n          <div class=\"trend-chip\" [ngClass]=\"getTrendColor(getTextData().trend!.value)\">\n            <mat-icon class=\"trend-icon\">{{ getTrendIcon(getTextData().trend!.value) }}</mat-icon>\n            <span>\n              {{ getTextData().trend!.value > 0 ? '+' : '' }}{{ getTextData().trend!.value }}%\n              @if (getTextData().trend!.label) {\n                <span class=\"trend-label\"> {{ getTextData().trend!.label }}</span>\n              }\n            </span>\n          </div>\n        }\n        @if (getTextData().description) {\n          <span class=\"kpi-description\">{{ getTextData().description }}</span>\n        }\n        <ng-content></ng-content>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 #fff0}50%{box-shadow:0 0 24px 2px #ffffff0f}}:host{display:flex;flex-direction:column}.kpi-card{flex:1;box-sizing:border-box;font-family:DM Sans,system-ui,sans-serif;position:relative;display:flex;flex-direction:row;background:#fff;border-radius:12px;border:1px solid #e2e5ea;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a;min-width:260px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.kpi-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 6px 20px #0000001a,0 2px 6px #0000000f}.kpi-body{flex:1;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;min-width:0}.kpi-header{display:flex;align-items:flex-start;gap:.75rem}.kpi-icon-wrap{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f4f5f7}.kpi-icon-wrap ::ng-deep mat-icon{font-size:20px;width:20px;height:20px;color:#1b2535}.kpi-title-section{display:flex;flex-direction:column;gap:.125rem;padding-top:.1rem}.kpi-label{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#6b7585;line-height:1.4}.kpi-label a{color:#2563eb;text-decoration:none;transition:color .15s ease}.kpi-label a:hover{color:#1d4ed8;text-decoration:underline}.kpi-subtitle{font-size:.72rem;color:#868f9d;font-weight:400}.kpi-content{display:flex;flex-direction:column;gap:.5rem}.value-display{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}.kpi-value{font-size:2rem;font-weight:700;color:#1b2535;line-height:1.1;letter-spacing:-.02em}.value-unit{font-size:.9rem;color:#6b7585;font-weight:500}.value-separator{font-size:1.4rem;color:#e2e5ea;font-weight:600;line-height:1}.value-max{font-size:1.1rem;color:#6b7585;font-weight:600}.progress-section{display:flex;flex-direction:column;gap:.6rem}.progress-bar-track{width:100%;height:6px;background:#f4f5f7;border-radius:99px;overflow:hidden}.progress-bar-fill{height:100%;background:#1b2535;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1);min-width:4px}.pills-section{display:flex;flex-direction:column;gap:.6rem}.pills-container{display:flex;gap:.4rem;flex-wrap:wrap}.text-section{display:flex;flex-direction:column;gap:.45rem}.trend-chip{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .55rem .2rem .35rem;border-radius:99px;font-size:.72rem;font-weight:600;width:fit-content;line-height:1}.trend-chip .trend-icon{font-size:13px;width:13px;height:13px}.trend-chip .trend-label{font-weight:400;opacity:.8}.trend-chip.trend-up{background:#d1fae5;color:#065f46}.trend-chip.trend-up ::ng-deep mat-icon{color:#059669}.trend-chip.trend-down{background:#fee2e2;color:#991b1b}.trend-chip.trend-down ::ng-deep mat-icon{color:#dc2626}.trend-chip.trend-neutral{background:#f4f5f7;color:#6b7585}.trend-chip.trend-neutral ::ng-deep mat-icon{color:#6b7585}.kpi-description{font-size:.75rem;color:#6b7585;font-weight:400;line-height:1.5}.skeleton-block{border-radius:6px;background:linear-gradient(90deg,#f4f5f7 25%,#e8eaee,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}.skeleton-label{height:10px;width:55%}.skeleton-value{height:32px;width:70%;margin-top:.25rem}.skeleton-sub{height:10px;width:40%}.kpi-card.minimal{border-color:transparent;box-shadow:none;background:transparent}.kpi-card.minimal:hover:not(.is-loading){transform:none;background:#f4f5f7;box-shadow:none}.kpi-card.minimal .kpi-icon-wrap{width:32px;height:32px;border-radius:0;background:transparent!important}.kpi-card.minimal .kpi-icon-wrap ::ng-deep mat-icon{font-size:28px;width:28px;height:28px;color:#6b7585}.kpi-card.minimal .kpi-label{font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:500}.kpi-card.dark-card{background:#1b2535;border-color:transparent;box-shadow:0 4px 20px #00000040,0 1px 4px #0003;flex-direction:column}.kpi-card.dark-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 8px 30px #00000059,0 2px 8px #0003}.kpi-card.dark-card .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.dark-card .kpi-filled-header{padding:1rem 1.25rem .875rem;background:#ffffff0f;border-bottom:1px solid rgba(255,255,255,.08)}.kpi-card.dark-card .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.dark-card .kpi-icon-wrap{background:#ffffff1a!important;border-radius:10px;width:40px;height:40px}.kpi-card.dark-card .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px;color:#ffffffd9!important}.kpi-card.dark-card .kpi-label{color:#ffffff80}.kpi-card.dark-card .kpi-subtitle{color:#ffffff59}.kpi-card.dark-card .kpi-value{color:#fff}.kpi-card.dark-card .value-unit{color:#ffffff73}.kpi-card.dark-card .value-separator{color:#fff3}.kpi-card.dark-card .value-max{color:#ffffff73}.kpi-card.dark-card .kpi-description{color:#fff6}.kpi-card.dark-card .progress-bar-track{background:#ffffff1a}.kpi-card.dark-card .trend-chip.trend-up{background:#05966940;color:#6ee7b7}.kpi-card.dark-card .trend-chip.trend-down{background:#dc262640;color:#fca5a5}.kpi-card.dark-card .trend-chip.trend-neutral{background:#ffffff14;color:#ffffff80}.kpi-card.dark-card .trend-chip ::ng-deep mat-icon{color:inherit!important}.kpi-card.dark-card .skeleton-block{background:linear-gradient(90deg,#ffffff0f 25%,#ffffff1f,#ffffff0f 75%);background-size:800px 100%}.kpi-card.icon-badge .kpi-icon-wrap{width:48px;height:48px;border-radius:12px}.kpi-card.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{font-size:26px;width:26px;height:26px}.kpi-card.top-bar{border-top-width:3px}.kpi-card.top-bar .kpi-icon-wrap{width:44px;height:44px;border-radius:10px}.kpi-card.top-bar .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top{flex-direction:column}.kpi-card.filled-top .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.filled-top .kpi-filled-header{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.25rem;border-radius:12px 12px 0 0}.kpi-card.filled-top .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.filled-top .kpi-icon-wrap{width:40px;height:40px;border-radius:10px;background:#ffffff73;backdrop-filter:blur(4px)}.kpi-card.filled-top .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top .kpi-label{color:#1b2535bf}.kpi-card.filled-top .kpi-subtitle{color:#1b25358c}.kpi-card.purple.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5!important}.kpi-card.purple.dark-card .progress-bar-fill{background:#4f46e5}.kpi-card.purple.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#ede9fe,#d5ccfd)}.kpi-card.purple.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.top-bar{border-top-color:#4f46e5}.kpi-card.purple.top-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.filled-top .kpi-filled-header{background:#ede9fe}.kpi-card.purple.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.accent-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple .progress-bar-fill{background:#4f46e5}.kpi-card.amber.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706!important}.kpi-card.amber.dark-card .progress-bar-fill{background:#d97706}.kpi-card.amber.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fef3c7,#fdeda9)}.kpi-card.amber.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.top-bar{border-top-color:#d97706}.kpi-card.amber.top-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.filled-top .kpi-filled-header{background:#fef3c7}.kpi-card.amber.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.accent-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber .progress-bar-fill{background:#d97706}.kpi-card.green.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#059669!important}.kpi-card.green.dark-card .progress-bar-fill{background:#059669}.kpi-card.green.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#d1fae5,#b5f7d5)}.kpi-card.green.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.top-bar{border-top-color:#059669}.kpi-card.green.top-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.filled-top .kpi-filled-header{background:#d1fae5}.kpi-card.green.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.accent-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green .progress-bar-fill{background:#059669}.kpi-card.blue.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8!important}.kpi-card.blue.dark-card .progress-bar-fill{background:#1d4ed8}.kpi-card.blue.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#dbeafe,#bdd9fd)}.kpi-card.blue.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.top-bar{border-top-color:#1d4ed8}.kpi-card.blue.top-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.filled-top .kpi-filled-header{background:#dbeafe}.kpi-card.blue.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.accent-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue .progress-bar-fill{background:#1d4ed8}.kpi-card.red.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626!important}.kpi-card.red.dark-card .progress-bar-fill{background:#dc2626}.kpi-card.red.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fee2e2,#fdc4c4)}.kpi-card.red.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.top-bar{border-top-color:#dc2626}.kpi-card.red.top-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.filled-top .kpi-filled-header{background:#fee2e2}.kpi-card.red.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.accent-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red .progress-bar-fill{background:#dc2626}.kpi-card.navy.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535!important}.kpi-card.navy.dark-card .progress-bar-fill{background:#1b2535}.kpi-card.navy.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#e8eaf0,#d5d9e4)}.kpi-card.navy.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.top-bar{border-top-color:#1b2535}.kpi-card.navy.top-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.filled-top .kpi-filled-header{background:#e8eaf0}.kpi-card.navy.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.accent-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy .progress-bar-fill{background:#1b2535}@media (max-width: 1280px){.kpi-card{min-width:220px}}@media (max-width: 768px){.kpi-card{min-width:100%}}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: CapitalizePipe, name: "capitalize" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "ud-progress-bar", inputs: ["value", "height", "borderRadius", "backgroundColor"] }, { kind: "component", type: PillComponent, selector: "ud-pill", inputs: ["text", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: KpiComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ud-kpi', imports: [
                         AsyncPipe,
                         CapitalizePipe,
-                        NgSwitch,
                         MatIcon,
                         RouterLink,
-                        MatCard,
                         NgClass,
+                        NgTemplateOutlet,
                         ProgressBarComponent,
                         PillComponent,
-                    ], template: "<mat-card class=\"kpi-card\" [ngClass]=\"iconColor\" appearance=\"outlined\">\n  <div class=\"kpi-header\">\n    <div class=\"kpi-icon\">\n      <mat-icon>{{ icon }}</mat-icon>\n    </div>\n    <div class=\"kpi-title-section\">\n      <span class=\"kpi-label\">\n        @if (titleRef) {\n          <a [routerLink]=\"titleRef\">{{ title }}</a>\n        } @else {\n          {{ title }}\n        }\n      </span>\n      @if (subtitle) {\n        <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n      }\n    </div>\n  </div>\n\n  <div class=\"kpi-content\">\n    <div [ngSwitch]=\"dataType\">\n      @switch (dataType) {\n        @case (KpiDataType.PROGRESS_BAR) {\n          <div class=\"progress-section\">\n            @if (getProgressData().type === KpiProgressBarType.PERCENTAGE) {\n              <div class=\"value-display\">\n                <span class=\"kpi-value\">{{\n                  getProgressData().data.value\n                }}</span>\n                <span class=\"value-unit\">%</span>\n              </div>\n            } @else if (\n              getProgressData().type === KpiProgressBarType.DIVISION\n            ) {\n              <div class=\"value-display\">\n                <span class=\"kpi-value\">{{\n                  getProgressData().data.value\n                }}</span>\n                <span class=\"value-separator\">/</span>\n                <span class=\"value-max\">{{ getProgressData().data.max }}</span>\n              </div>\n            }\n            <ud-progress-bar\n              [value]=\"getProgressBarValue()\"></ud-progress-bar>\n          </div>\n        }\n        @case (KpiDataType.PILLS) {\n          <div class=\"pills-section\">\n            <span class=\"kpi-value\">{{ getPillData().value }}</span>\n            <div class=\"pills-container\">\n              @for (pill of getPillData().pills; track pill) {\n                <ud-pill\n                  [text]=\"pill.value + ' ' + (pill.label | async | capitalize)\"\n                  [type]=\"pill.type\"></ud-pill>\n              }\n            </div>\n          </div>\n        }\n        @case (KpiDataType.TEXT) {\n          <div class=\"text-section\">\n            <span class=\"kpi-value\">{{ getTextData().value }}</span>\n            @if (getTextData().unit) {\n              <span class=\"value-unit\">{{ getTextData().unit }}</span>\n            }\n            <ng-content></ng-content>\n          </div>\n        }\n      }\n    </div>\n  </div>\n</mat-card>\n", styles: [".kpi-card{padding:1.5rem;border-radius:15px;transition:all .2s ease;display:flex;flex-direction:column;gap:1rem;min-width:280px}.kpi-card:hover{box-shadow:0 4px 12px #00000014;transform:translateY(-2px)}.kpi-card .kpi-header{display:flex;gap:1rem;align-items:flex-start}.kpi-card .kpi-header .kpi-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}.kpi-card .kpi-header .kpi-icon ::ng-deep mat-icon{font-size:28px;width:28px;height:28px}.kpi-card .kpi-header .kpi-title-section{display:flex;flex-direction:column;gap:.25rem;flex:1}.kpi-card .kpi-header .kpi-title-section .kpi-label{font-size:.875rem;color:#6b7280;font-weight:500}.kpi-card .kpi-header .kpi-title-section .kpi-label a{color:#3b82f6;text-decoration:none;transition:color .2s ease}.kpi-card .kpi-header .kpi-title-section .kpi-label a:hover{color:#2563eb;text-decoration:underline}.kpi-card .kpi-header .kpi-title-section .kpi-subtitle{font-size:.75rem;color:#9ca3af;font-weight:500}.kpi-card .kpi-content .progress-section{display:flex;flex-direction:column;gap:.75rem}.kpi-card .kpi-content .progress-section .value-display{display:flex;align-items:baseline;gap:.25rem}.kpi-card .kpi-content .progress-section .value-display .kpi-value{font-size:1.875rem;font-weight:700;color:#111827;line-height:1.2}.kpi-card .kpi-content .progress-section .value-display .value-unit{font-size:1rem;color:#9ca3af;font-weight:500}.kpi-card .kpi-content .progress-section .value-display .value-separator{font-size:1.5rem;color:#d1d5db;font-weight:600}.kpi-card .kpi-content .progress-section .value-display .value-max{font-size:1.25rem;color:#6b7280;font-weight:600}.kpi-card .kpi-content .pills-section{display:flex;flex-direction:column;gap:.75rem}.kpi-card .kpi-content .pills-section .kpi-value{font-size:1.875rem;font-weight:700;color:#111827;line-height:1.2}.kpi-card .kpi-content .pills-section .pills-container{display:flex;gap:.5rem;flex-wrap:wrap}.kpi-card .kpi-content .text-section{display:flex;flex-direction:column;gap:.5rem}.kpi-card .kpi-content .text-section .kpi-value{font-size:1.875rem;font-weight:700;color:#111827;line-height:1.2}.kpi-card .kpi-content .text-section .value-unit{font-size:.875rem;color:#6b7280;font-weight:500;margin-top:.25rem}.kpi-card.purple .kpi-icon{background:linear-gradient(135deg,#e0e7ff,#c7d2fe)}.kpi-card.purple .kpi-icon ::ng-deep mat-icon{color:#4338ca}.kpi-card.amber .kpi-icon{background:linear-gradient(135deg,#fef3c7,#fde68a)}.kpi-card.amber .kpi-icon ::ng-deep mat-icon{color:#d97706}.kpi-card.green .kpi-icon{background:linear-gradient(135deg,#d1fae5,#a7f3d0)}.kpi-card.green .kpi-icon ::ng-deep mat-icon{color:#059669}.kpi-card.blue .kpi-icon{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}.kpi-card.blue .kpi-icon ::ng-deep mat-icon{color:#1e40af}.kpi-card.red .kpi-icon{background:linear-gradient(135deg,#fee2e2,#fecaca)}.kpi-card.red .kpi-icon ::ng-deep mat-icon{color:#dc2626}@media (max-width: 1280px){.kpi-card{min-width:240px}}@media (max-width: 768px){.kpi-card{min-width:100%}}\n"] }]
+                    ], template: "<div class=\"kpi-card\" [ngClass]=\"[iconColor, variant, loading ? 'is-loading' : '']\">\n\n  <div class=\"kpi-body\">\n    @if (loading) {\n      <div class=\"skeleton-block skeleton-label\"></div>\n      <div class=\"skeleton-block skeleton-value\"></div>\n      <div class=\"skeleton-block skeleton-sub\"></div>\n    } @else {\n\n      <!-- filled-top / dark-card: header is the tinted strip -->\n      @if (variant === KpiVariant.FILLED_TOP || variant === KpiVariant.DARK_CARD) {\n        <div class=\"kpi-filled-header\">\n          <div class=\"kpi-icon-wrap\">\n            <mat-icon>{{ icon }}</mat-icon>\n          </div>\n          <div class=\"kpi-title-section\">\n            <span class=\"kpi-label\">\n              @if (titleRef) {\n                <a [routerLink]=\"titleRef\">{{ title }}</a>\n              } @else {\n                {{ title }}\n              }\n            </span>\n            @if (subtitle) {\n              <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </div>\n        <div class=\"kpi-content\">\n          <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n        </div>\n      } @else {\n        <!-- Standard header (icon-badge, top-bar, minimal) -->\n        <div class=\"kpi-header\">\n          <div class=\"kpi-icon-wrap\">\n            <mat-icon>{{ icon }}</mat-icon>\n          </div>\n          <div class=\"kpi-title-section\">\n            <span class=\"kpi-label\">\n              @if (titleRef) {\n                <a [routerLink]=\"titleRef\">{{ title }}</a>\n              } @else {\n                {{ title }}\n              }\n            </span>\n            @if (subtitle) {\n              <span class=\"kpi-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </div>\n        <div class=\"kpi-content\">\n          <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container>\n        </div>\n      }\n\n    }\n  </div>\n</div>\n\n<!-- Shared content template -->\n<ng-template #contentTpl>\n  @switch (dataType) {\n    @case (KpiDataType.PROGRESS_BAR) {\n      <div class=\"progress-section\">\n        @if (getProgressData().type === KpiProgressBarType.PERCENTAGE) {\n          <div class=\"value-display\">\n            <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n            <span class=\"value-unit\">%</span>\n          </div>\n        } @else if (getProgressData().type === KpiProgressBarType.DIVISION) {\n          <div class=\"value-display\">\n            <span class=\"kpi-value\">{{ getProgressData().data.value }}</span>\n            <span class=\"value-separator\">/</span>\n            <span class=\"value-max\">{{ getProgressData().data.max }}</span>\n          </div>\n        }\n        <div class=\"progress-bar-track\">\n          <div class=\"progress-bar-fill\" [style.width.%]=\"getProgressBarValue()\"></div>\n        </div>\n        <ud-progress-bar [value]=\"getProgressBarValue()\" style=\"display:none\"></ud-progress-bar>\n      </div>\n    }\n    @case (KpiDataType.PILLS) {\n      <div class=\"pills-section\">\n        <div class=\"value-display\">\n          <span class=\"kpi-value\">{{ getPillData().value }}</span>\n        </div>\n        <div class=\"pills-container\">\n          @for (pill of getPillData().pills; track pill) {\n            <ud-pill [text]=\"pill.value + ' ' + (pill.label | async | capitalize)\" [type]=\"pill.type\"></ud-pill>\n          }\n        </div>\n      </div>\n    }\n    @case (KpiDataType.TEXT) {\n      <div class=\"text-section\">\n        <div class=\"value-display\">\n          <span class=\"kpi-value\">{{ getTextData().value }}</span>\n          @if (getTextData().unit) {\n            <span class=\"value-unit\">{{ getTextData().unit }}</span>\n          }\n        </div>\n        @if (getTextData().trend) {\n          <div class=\"trend-chip\" [ngClass]=\"getTrendColor(getTextData().trend!.value)\">\n            <mat-icon class=\"trend-icon\">{{ getTrendIcon(getTextData().trend!.value) }}</mat-icon>\n            <span>\n              {{ getTextData().trend!.value > 0 ? '+' : '' }}{{ getTextData().trend!.value }}%\n              @if (getTextData().trend!.label) {\n                <span class=\"trend-label\"> {{ getTextData().trend!.label }}</span>\n              }\n            </span>\n          </div>\n        }\n        @if (getTextData().description) {\n          <span class=\"kpi-description\">{{ getTextData().description }}</span>\n        }\n        <ng-content></ng-content>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 #fff0}50%{box-shadow:0 0 24px 2px #ffffff0f}}:host{display:flex;flex-direction:column}.kpi-card{flex:1;box-sizing:border-box;font-family:DM Sans,system-ui,sans-serif;position:relative;display:flex;flex-direction:row;background:#fff;border-radius:12px;border:1px solid #e2e5ea;box-shadow:0 1px 3px #0000000f,0 1px 2px #0000000a;min-width:260px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.kpi-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 6px 20px #0000001a,0 2px 6px #0000000f}.kpi-body{flex:1;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;min-width:0}.kpi-header{display:flex;align-items:flex-start;gap:.75rem}.kpi-icon-wrap{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#f4f5f7}.kpi-icon-wrap ::ng-deep mat-icon{font-size:20px;width:20px;height:20px;color:#1b2535}.kpi-title-section{display:flex;flex-direction:column;gap:.125rem;padding-top:.1rem}.kpi-label{font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#6b7585;line-height:1.4}.kpi-label a{color:#2563eb;text-decoration:none;transition:color .15s ease}.kpi-label a:hover{color:#1d4ed8;text-decoration:underline}.kpi-subtitle{font-size:.72rem;color:#868f9d;font-weight:400}.kpi-content{display:flex;flex-direction:column;gap:.5rem}.value-display{display:flex;align-items:baseline;gap:.3rem;flex-wrap:wrap}.kpi-value{font-size:2rem;font-weight:700;color:#1b2535;line-height:1.1;letter-spacing:-.02em}.value-unit{font-size:.9rem;color:#6b7585;font-weight:500}.value-separator{font-size:1.4rem;color:#e2e5ea;font-weight:600;line-height:1}.value-max{font-size:1.1rem;color:#6b7585;font-weight:600}.progress-section{display:flex;flex-direction:column;gap:.6rem}.progress-bar-track{width:100%;height:6px;background:#f4f5f7;border-radius:99px;overflow:hidden}.progress-bar-fill{height:100%;background:#1b2535;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1);min-width:4px}.pills-section{display:flex;flex-direction:column;gap:.6rem}.pills-container{display:flex;gap:.4rem;flex-wrap:wrap}.text-section{display:flex;flex-direction:column;gap:.45rem}.trend-chip{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .55rem .2rem .35rem;border-radius:99px;font-size:.72rem;font-weight:600;width:fit-content;line-height:1}.trend-chip .trend-icon{font-size:13px;width:13px;height:13px}.trend-chip .trend-label{font-weight:400;opacity:.8}.trend-chip.trend-up{background:#d1fae5;color:#065f46}.trend-chip.trend-up ::ng-deep mat-icon{color:#059669}.trend-chip.trend-down{background:#fee2e2;color:#991b1b}.trend-chip.trend-down ::ng-deep mat-icon{color:#dc2626}.trend-chip.trend-neutral{background:#f4f5f7;color:#6b7585}.trend-chip.trend-neutral ::ng-deep mat-icon{color:#6b7585}.kpi-description{font-size:.75rem;color:#6b7585;font-weight:400;line-height:1.5}.skeleton-block{border-radius:6px;background:linear-gradient(90deg,#f4f5f7 25%,#e8eaee,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}.skeleton-label{height:10px;width:55%}.skeleton-value{height:32px;width:70%;margin-top:.25rem}.skeleton-sub{height:10px;width:40%}.kpi-card.minimal{border-color:transparent;box-shadow:none;background:transparent}.kpi-card.minimal:hover:not(.is-loading){transform:none;background:#f4f5f7;box-shadow:none}.kpi-card.minimal .kpi-icon-wrap{width:32px;height:32px;border-radius:0;background:transparent!important}.kpi-card.minimal .kpi-icon-wrap ::ng-deep mat-icon{font-size:28px;width:28px;height:28px;color:#6b7585}.kpi-card.minimal .kpi-label{font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:500}.kpi-card.dark-card{background:#1b2535;border-color:transparent;box-shadow:0 4px 20px #00000040,0 1px 4px #0003;flex-direction:column}.kpi-card.dark-card:hover:not(.is-loading){transform:translateY(-2px);box-shadow:0 8px 30px #00000059,0 2px 8px #0003}.kpi-card.dark-card .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.dark-card .kpi-filled-header{padding:1rem 1.25rem .875rem;background:#ffffff0f;border-bottom:1px solid rgba(255,255,255,.08)}.kpi-card.dark-card .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.dark-card .kpi-icon-wrap{background:#ffffff1a!important;border-radius:10px;width:40px;height:40px}.kpi-card.dark-card .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px;color:#ffffffd9!important}.kpi-card.dark-card .kpi-label{color:#ffffff80}.kpi-card.dark-card .kpi-subtitle{color:#ffffff59}.kpi-card.dark-card .kpi-value{color:#fff}.kpi-card.dark-card .value-unit{color:#ffffff73}.kpi-card.dark-card .value-separator{color:#fff3}.kpi-card.dark-card .value-max{color:#ffffff73}.kpi-card.dark-card .kpi-description{color:#fff6}.kpi-card.dark-card .progress-bar-track{background:#ffffff1a}.kpi-card.dark-card .trend-chip.trend-up{background:#05966940;color:#6ee7b7}.kpi-card.dark-card .trend-chip.trend-down{background:#dc262640;color:#fca5a5}.kpi-card.dark-card .trend-chip.trend-neutral{background:#ffffff14;color:#ffffff80}.kpi-card.dark-card .trend-chip ::ng-deep mat-icon{color:inherit!important}.kpi-card.dark-card .skeleton-block{background:linear-gradient(90deg,#ffffff0f 25%,#ffffff1f,#ffffff0f 75%);background-size:800px 100%}.kpi-card.icon-badge .kpi-icon-wrap{width:48px;height:48px;border-radius:12px}.kpi-card.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{font-size:26px;width:26px;height:26px}.kpi-card.top-bar{border-top-width:3px}.kpi-card.top-bar .kpi-icon-wrap{width:44px;height:44px;border-radius:10px}.kpi-card.top-bar .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top{flex-direction:column}.kpi-card.filled-top .kpi-body{padding:0;gap:0;flex-direction:column}.kpi-card.filled-top .kpi-filled-header{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.25rem;border-radius:12px 12px 0 0}.kpi-card.filled-top .kpi-content{padding:1rem 1.25rem 1.25rem;flex:1}.kpi-card.filled-top .kpi-icon-wrap{width:40px;height:40px;border-radius:10px;background:#ffffff73;backdrop-filter:blur(4px)}.kpi-card.filled-top .kpi-icon-wrap ::ng-deep mat-icon{font-size:22px;width:22px;height:22px}.kpi-card.filled-top .kpi-label{color:#1b2535bf}.kpi-card.filled-top .kpi-subtitle{color:#1b25358c}.kpi-card.purple.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5!important}.kpi-card.purple.dark-card .progress-bar-fill{background:#4f46e5}.kpi-card.purple.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#ede9fe,#d5ccfd)}.kpi-card.purple.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.top-bar{border-top-color:#4f46e5}.kpi-card.purple.top-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.filled-top .kpi-filled-header{background:#ede9fe}.kpi-card.purple.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#4f46e5}.kpi-card.purple.accent-bar .kpi-icon-wrap{background:#ede9fe}.kpi-card.purple .progress-bar-fill{background:#4f46e5}.kpi-card.amber.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706!important}.kpi-card.amber.dark-card .progress-bar-fill{background:#d97706}.kpi-card.amber.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fef3c7,#fdeda9)}.kpi-card.amber.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.top-bar{border-top-color:#d97706}.kpi-card.amber.top-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.filled-top .kpi-filled-header{background:#fef3c7}.kpi-card.amber.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#d97706}.kpi-card.amber.accent-bar .kpi-icon-wrap{background:#fef3c7}.kpi-card.amber .progress-bar-fill{background:#d97706}.kpi-card.green.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#059669!important}.kpi-card.green.dark-card .progress-bar-fill{background:#059669}.kpi-card.green.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#d1fae5,#b5f7d5)}.kpi-card.green.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.top-bar{border-top-color:#059669}.kpi-card.green.top-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.filled-top .kpi-filled-header{background:#d1fae5}.kpi-card.green.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#059669}.kpi-card.green.accent-bar .kpi-icon-wrap{background:#d1fae5}.kpi-card.green .progress-bar-fill{background:#059669}.kpi-card.blue.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8!important}.kpi-card.blue.dark-card .progress-bar-fill{background:#1d4ed8}.kpi-card.blue.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#dbeafe,#bdd9fd)}.kpi-card.blue.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.top-bar{border-top-color:#1d4ed8}.kpi-card.blue.top-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.filled-top .kpi-filled-header{background:#dbeafe}.kpi-card.blue.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1d4ed8}.kpi-card.blue.accent-bar .kpi-icon-wrap{background:#dbeafe}.kpi-card.blue .progress-bar-fill{background:#1d4ed8}.kpi-card.red.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626!important}.kpi-card.red.dark-card .progress-bar-fill{background:#dc2626}.kpi-card.red.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#fee2e2,#fdc4c4)}.kpi-card.red.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.top-bar{border-top-color:#dc2626}.kpi-card.red.top-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.filled-top .kpi-filled-header{background:#fee2e2}.kpi-card.red.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#dc2626}.kpi-card.red.accent-bar .kpi-icon-wrap{background:#fee2e2}.kpi-card.red .progress-bar-fill{background:#dc2626}.kpi-card.navy.minimal .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535!important}.kpi-card.navy.dark-card .progress-bar-fill{background:#1b2535}.kpi-card.navy.icon-badge .kpi-icon-wrap{background:linear-gradient(135deg,#e8eaf0,#d5d9e4)}.kpi-card.navy.icon-badge .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.top-bar{border-top-color:#1b2535}.kpi-card.navy.top-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy.top-bar .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.filled-top .kpi-filled-header{background:#e8eaf0}.kpi-card.navy.filled-top .kpi-filled-header .kpi-icon-wrap ::ng-deep mat-icon{color:#1b2535}.kpi-card.navy.accent-bar .kpi-icon-wrap{background:#e8eaf0}.kpi-card.navy .progress-bar-fill{background:#1b2535}@media (max-width: 1280px){.kpi-card{min-width:220px}}@media (max-width: 768px){.kpi-card{min-width:100%}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
@@ -2608,6 +2633,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }], titleRef: [{
                 type: Input
+            }], loading: [{
+                type: Input
+            }], variant: [{
+                type: Input
             }] } });
 
 /**
@@ -3006,5 +3035,5 @@ const generateTimeOptions = (start, end, intervalMinutes = 5) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, ApplicationStatus, AutocompleteComponent, CapitalizePipe, CarouselComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateInputComponent, DateOperator, DateRangeInputComponent, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FileInputComponent, FilterType, IconColor, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PhoneInputComponent, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, Role, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, TextareaComponent, TimePickerComponent, ToggleComponent, TranslateWrapperService, UdButtonComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray };
+export { ActionType, ApplicationStatus, AutocompleteComponent, CapitalizePipe, CarouselComponent, CustomInputComponent, CustomSnackbarComponent, CustomTableComponent, DateInputComponent, DateOperator, DateRangeInputComponent, DynamicComponentComponent, EditViewComponent, EditViewSectionDirective, FileInputComponent, FilterType, IconColor, KpiComponent, KpiDataType, KpiPillType, KpiProgressBarType, KpiVariant, ModalComponent, ModalInputType, MultiSelectComponent, NumberOperator, PhoneInputComponent, PillComponent, PillToggleComponent, PluralizePipe, ProgressBarComponent, Role, SafePipe, SingularPipe, SnackbarType, StringOperator, SummaryViewComponent, TableDisplayColumnType, TabsComponent, TelInputComponent, TextInputComponent, TextareaComponent, TimePickerComponent, ToggleComponent, TranslateWrapperService, UdButtonComponent, capitalize, formatLocalDate, formatLocalDateTime, formatLocalDateTimeLongForm, formatLocalTime, formatLocalTimeWithMinutes, formatLocalTimeWithMinutesAmPm, formatMonthYear, formatPhoneNumber, formatStringDate, formatStringDateTime, generateTimeOptions, inListValidator, parseLocalDate, pluralize, spaceCase, updateArray };
 //# sourceMappingURL=ud-components.mjs.map