ud-components 0.3.13 → 0.3.15

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';
@@ -48,6 +48,7 @@ import * as i2$4 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
 import * as i1$4 from '@angular/platform-browser';
 import { MatFormField as MatFormField$1 } from '@angular/material/form-field';
+import { IonInput, IonSpinner, IonSelect, IonSelectOption, IonTextarea, IonToggle, IonSegment, IonSegmentButton, IonLabel } from '@ionic/angular/standalone';
 
 class CarouselComponent {
     pictures = [];
@@ -2507,6 +2508,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 +2523,7 @@ var IconColor;
     IconColor["GREEN"] = "green";
     IconColor["BLUE"] = "blue";
     IconColor["RED"] = "red";
+    IconColor["NAVY"] = "navy";
 })(IconColor || (IconColor = {}));
 
 class PillComponent {
@@ -2563,6 +2573,8 @@ class KpiComponent {
     icon;
     iconColor;
     titleRef;
+    loading = false;
+    variant = KpiVariant.ICON_BADGE;
     getProgressData() {
         return this.data;
     }
@@ -2576,24 +2588,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 +2634,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Input
             }], titleRef: [{
                 type: Input
+            }], loading: [{
+                type: Input
+            }], variant: [{
+                type: Input
             }] } });
 
 /**
@@ -2983,6 +3013,214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 type: Output
             }] } });
 
+class IonTextInputComponent {
+    controlName;
+    label = '';
+    placeholder = '';
+    type = 'text';
+    loading = false;
+    disabled = false;
+    step = 1;
+    controlContainer = inject(ControlContainer);
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    increment() {
+        const current = Number(this.control.value ?? 0);
+        this.control.setValue(current + this.step);
+        this.control.markAsDirty();
+    }
+    decrement() {
+        const current = Number(this.control.value ?? 0);
+        this.control.setValue(current - this.step);
+        this.control.markAsDirty();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: IonTextInputComponent, isStandalone: true, selector: "ud-ion-text-input", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", type: "type", loading: "loading", disabled: "disabled", step: "step" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-input\n    class=\"ud-ion-input\"\n    [formControlName]=\"controlName\"\n    [type]=\"type\"\n    [label]=\"label\"\n    labelPlacement=\"floating\"\n    fill=\"outline\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || control.disabled\">\n    @if (loading) {\n      <ion-spinner slot=\"end\" name=\"crescent\" class=\"ud-ion-spinner\" />\n    } @else if (type === 'number') {\n      <div slot=\"end\" class=\"ud-number-arrows\">\n        <button\n          type=\"button\"\n          class=\"ud-arrow-btn\"\n          [disabled]=\"disabled || control.disabled\"\n          (mousedown)=\"$event.preventDefault(); increment()\">&#9650;</button>\n        <button\n          type=\"button\"\n          class=\"ud-arrow-btn\"\n          [disabled]=\"disabled || control.disabled\"\n          (mousedown)=\"$event.preventDefault(); decrement()\">&#9660;</button>\n      </div>\n    }\n  </ion-input>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-input.ud-ion-input{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--highlight-color-valid: #1b2535;--padding-start: 14px;--padding-end: 14px;--padding-top: 10px;--padding-bottom: 10px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-input.ud-ion-input::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-spinner{color:#6b7585;width:16px;height:16px}.ud-number-arrows{display:flex;flex-direction:column;gap:1px;margin-right:2px}.ud-arrow-btn{display:flex;align-items:center;justify-content:center;width:18px;height:14px;background:#f4f5f7;border:1px solid #e2e5ea;border-radius:3px;cursor:pointer;font-size:8px;color:#6b7585;padding:0;line-height:1;transition:background .15s ease}.ud-arrow-btn:hover:not([disabled]){background:#e2e5ea;color:#1b2535}.ud-arrow-btn[disabled]{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-ion-text-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonInput, IonSpinner], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-input\n    class=\"ud-ion-input\"\n    [formControlName]=\"controlName\"\n    [type]=\"type\"\n    [label]=\"label\"\n    labelPlacement=\"floating\"\n    fill=\"outline\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled || control.disabled\">\n    @if (loading) {\n      <ion-spinner slot=\"end\" name=\"crescent\" class=\"ud-ion-spinner\" />\n    } @else if (type === 'number') {\n      <div slot=\"end\" class=\"ud-number-arrows\">\n        <button\n          type=\"button\"\n          class=\"ud-arrow-btn\"\n          [disabled]=\"disabled || control.disabled\"\n          (mousedown)=\"$event.preventDefault(); increment()\">&#9650;</button>\n        <button\n          type=\"button\"\n          class=\"ud-arrow-btn\"\n          [disabled]=\"disabled || control.disabled\"\n          (mousedown)=\"$event.preventDefault(); decrement()\">&#9660;</button>\n      </div>\n    }\n  </ion-input>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-input.ud-ion-input{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--highlight-color-valid: #1b2535;--padding-start: 14px;--padding-end: 14px;--padding-top: 10px;--padding-bottom: 10px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-input.ud-ion-input::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-spinner{color:#6b7585;width:16px;height:16px}.ud-number-arrows{display:flex;flex-direction:column;gap:1px;margin-right:2px}.ud-arrow-btn{display:flex;align-items:center;justify-content:center;width:18px;height:14px;background:#f4f5f7;border:1px solid #e2e5ea;border-radius:3px;cursor:pointer;font-size:8px;color:#6b7585;padding:0;line-height:1;transition:background .15s ease}.ud-arrow-btn:hover:not([disabled]){background:#e2e5ea;color:#1b2535}.ud-arrow-btn[disabled]{opacity:.4;cursor:not-allowed}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }] } });
+
+class IonSelectComponent {
+    controlName;
+    label = '';
+    options = [];
+    multiple = false;
+    placeholder = 'Select...';
+    loading = false;
+    disabled = false;
+    controlContainer = inject(ControlContainer);
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: IonSelectComponent, isStandalone: true, selector: "ud-ion-select", inputs: { controlName: "controlName", label: "label", options: "options", multiple: "multiple", placeholder: "placeholder", loading: "loading", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  @if (loading) {\n    <div class=\"ud-ion-skeleton\"></div>\n  } @else {\n    <ion-select\n      class=\"ud-ion-select\"\n      [formControlName]=\"controlName\"\n      [label]=\"label\"\n      labelPlacement=\"floating\"\n      fill=\"outline\"\n      [multiple]=\"multiple\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled || control.disabled\">\n      @for (option of options; track option.value) {\n        <ion-select-option [value]=\"option.value\">{{ option.label }}</ion-select-option>\n      }\n    </ion-select>\n  }\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-select.ud-ion-select{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;width:100%}ion-select.ud-ion-select::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-skeleton{height:56px;border-radius:12px;background:linear-gradient(90deg,#f4f5f7 25%,#eaecef,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-ion-select', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonSelect, IonSelectOption], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  @if (loading) {\n    <div class=\"ud-ion-skeleton\"></div>\n  } @else {\n    <ion-select\n      class=\"ud-ion-select\"\n      [formControlName]=\"controlName\"\n      [label]=\"label\"\n      labelPlacement=\"floating\"\n      fill=\"outline\"\n      [multiple]=\"multiple\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled || control.disabled\">\n      @for (option of options; track option.value) {\n        <ion-select-option [value]=\"option.value\">{{ option.label }}</ion-select-option>\n      }\n    </ion-select>\n  }\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-select.ud-ion-select{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem;width:100%}ion-select.ud-ion-select::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}.ud-ion-skeleton{height:56px;border-radius:12px;background:linear-gradient(90deg,#f4f5f7 25%,#eaecef,#f4f5f7 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear}@keyframes shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class IonTextareaComponent {
+    controlName;
+    label = '';
+    placeholder = '';
+    rows = 4;
+    disabled = false;
+    controlContainer = inject(ControlContainer);
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: IonTextareaComponent, isStandalone: true, selector: "ud-ion-textarea", inputs: { controlName: "controlName", label: "label", placeholder: "placeholder", rows: "rows", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-textarea\n    class=\"ud-ion-textarea\"\n    [formControlName]=\"controlName\"\n    [label]=\"label\"\n    labelPlacement=\"floating\"\n    fill=\"outline\"\n    [placeholder]=\"placeholder\"\n    [rows]=\"rows\"\n    [disabled]=\"disabled || control.disabled\" />\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-textarea.ud-ion-textarea{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--padding-start: 14px;--padding-end: 14px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-textarea.ud-ion-textarea::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-ion-textarea', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonTextarea], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-field-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-textarea\n    class=\"ud-ion-textarea\"\n    [formControlName]=\"controlName\"\n    [label]=\"label\"\n    labelPlacement=\"floating\"\n    fill=\"outline\"\n    [placeholder]=\"placeholder\"\n    [rows]=\"rows\"\n    [disabled]=\"disabled || control.disabled\" />\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-field-wrap{width:100%}.ud-ion-field-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-textarea.ud-ion-textarea{--border-radius: 12px;--border-color: #e2e5ea;--border-width: 1.5px;--background: #ffffff;--color: #1b2535;--placeholder-color: #6b7585;--placeholder-opacity: 1;--highlight-color-focused: #1b2535;--padding-start: 14px;--padding-end: 14px;font-family:DM Sans,system-ui,sans-serif;font-size:.9rem}ion-textarea.ud-ion-textarea::part(label){font-family:DM Sans,system-ui,sans-serif;color:#6b7585;font-size:.85rem}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class IonToggleComponent {
+    controlName;
+    label = '';
+    labelPosition = 'end';
+    disabled = false;
+    ionChange = new EventEmitter();
+    controlContainer = inject(ControlContainer);
+    destroy$ = new Subject();
+    ngOnInit() {
+        this.control.valueChanges
+            .pipe(startWith(this.control.value), takeUntil(this.destroy$))
+            .subscribe(() => { });
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    onToggleChange(event) {
+        this.ionChange.emit(event.detail.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: IonToggleComponent, isStandalone: true, selector: "ud-ion-toggle", inputs: { controlName: "controlName", label: "label", labelPosition: "labelPosition", disabled: "disabled" }, outputs: { ionChange: "ionChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-toggle-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-toggle\n    class=\"ud-ion-toggle\"\n    [formControlName]=\"controlName\"\n    [labelPlacement]=\"labelPosition\"\n    [disabled]=\"disabled || control.disabled\"\n    (ionChange)=\"onToggleChange($event)\">\n    {{ label }}\n  </ion-toggle>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-toggle-wrap{display:inline-flex;align-items:center}.ud-ion-toggle-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-toggle.ud-ion-toggle{--track-background: #e2e5ea;--track-background-checked: #1b2535;--handle-background: #ffffff;--handle-background-checked: #ffffff;--handle-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535}ion-toggle.ud-ion-toggle::part(label){font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonToggle, selector: "ion-toggle", inputs: ["checked", "color", "disabled", "enableOnOffLabels", "errorText", "helperText", "justify", "labelPlacement", "mode", "name", "value"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-ion-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonToggle], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-toggle-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  <ion-toggle\n    class=\"ud-ion-toggle\"\n    [formControlName]=\"controlName\"\n    [labelPlacement]=\"labelPosition\"\n    [disabled]=\"disabled || control.disabled\"\n    (ionChange)=\"onToggleChange($event)\">\n    {{ label }}\n  </ion-toggle>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-toggle-wrap{display:inline-flex;align-items:center}.ud-ion-toggle-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}ion-toggle.ud-ion-toggle{--track-background: #e2e5ea;--track-background-checked: #1b2535;--handle-background: #ffffff;--handle-background-checked: #ffffff;--handle-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535}ion-toggle.ud-ion-toggle::part(label){font-family:DM Sans,system-ui,sans-serif;font-size:.875rem;color:#1b2535;font-weight:500}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], ionChange: [{
+                type: Output
+            }] } });
+
+class IonPillToggleComponent {
+    controlName;
+    label = '';
+    options = [];
+    disabled = false;
+    controlContainer = inject(ControlContainer);
+    ngOnChanges(changes) {
+        if (changes['disabled']) {
+            this.disabled ? this.control.disable() : this.control.enable();
+        }
+    }
+    get control() {
+        return this.controlContainer.control.get(this.controlName);
+    }
+    onSegmentChange(event) {
+        if (this.control.disabled)
+            return;
+        this.control.setValue(event.detail.value);
+        this.control.markAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonPillToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: IonPillToggleComponent, isStandalone: true, selector: "ud-ion-pill-toggle", inputs: { controlName: "controlName", label: "label", options: "options", disabled: "disabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ud-ion-pill-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  @if (label) {\n    <span class=\"ud-ion-pill-label\">{{ label }}</span>\n  }\n  <ion-segment\n    class=\"ud-ion-segment\"\n    [value]=\"control.value\"\n    [disabled]=\"disabled || control.disabled\"\n    (ionChange)=\"onSegmentChange($event)\">\n    @for (option of options; track option.value) {\n      <ion-segment-button [value]=\"option.value\" class=\"ud-ion-segment-btn\">\n        <ion-label>{{ option.label }}</ion-label>\n      </ion-segment-button>\n    }\n  </ion-segment>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-pill-wrap{display:flex;flex-direction:column;gap:6px}.ud-ion-pill-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.ud-ion-pill-label{font-family:DM Sans,system-ui,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b7585}ion-segment.ud-ion-segment{--background: #f4f5f7;border-radius:10px;padding:3px;height:40px}ion-segment-button.ud-ion-segment-btn{--background: transparent;--background-checked: #1b2535;--color: #6b7585;--color-checked: #ffffff;--border-radius: 8px;--indicator-height: 0;--padding-top: 0;--padding-bottom: 0;min-height:unset;font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;transition:background .15s ease}ion-segment-button.ud-ion-segment-btn ion-label{font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: IonPillToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ud-ion-pill-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonSegment, IonSegmentButton, IonLabel], viewProviders: [{ provide: ControlContainer, useFactory: () => inject(ControlContainer, { skipSelf: true }) }], template: "<div class=\"ud-ion-pill-wrap\" [class.is-disabled]=\"disabled || control.disabled\">\n  @if (label) {\n    <span class=\"ud-ion-pill-label\">{{ label }}</span>\n  }\n  <ion-segment\n    class=\"ud-ion-segment\"\n    [value]=\"control.value\"\n    [disabled]=\"disabled || control.disabled\"\n    (ionChange)=\"onSegmentChange($event)\">\n    @for (option of options; track option.value) {\n      <ion-segment-button [value]=\"option.value\" class=\"ud-ion-segment-btn\">\n        <ion-label>{{ option.label }}</ion-label>\n      </ion-segment-button>\n    }\n  </ion-segment>\n</div>\n", styles: [":host{display:block;font-family:DM Sans,system-ui,sans-serif}.ud-ion-pill-wrap{display:flex;flex-direction:column;gap:6px}.ud-ion-pill-wrap.is-disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.ud-ion-pill-label{font-family:DM Sans,system-ui,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b7585}ion-segment.ud-ion-segment{--background: #f4f5f7;border-radius:10px;padding:3px;height:40px}ion-segment-button.ud-ion-segment-btn{--background: transparent;--background-checked: #1b2535;--color: #6b7585;--color-checked: #ffffff;--border-radius: 8px;--indicator-height: 0;--padding-top: 0;--padding-bottom: 0;min-height:unset;font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;transition:background .15s ease}ion-segment-button.ud-ion-segment-btn ion-label{font-family:DM Sans,system-ui,sans-serif;font-size:.8rem;font-weight:500;margin:0}\n"] }]
+        }], propDecorators: { controlName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
 const generateTimeOptions = (start, end, intervalMinutes = 5) => {
     const options = [];
     const cursor = new Date(start);
@@ -3006,5 +3244,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, IonPillToggleComponent, IonSelectComponent, IonTextInputComponent, IonTextareaComponent, IonToggleComponent, 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