import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@memberjunction/ng-shared-generic";
function KPICardComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 5);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r0.formatValue(ctx_r0.data.value), " ");
} }
function KPICardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 6);
    i0.ɵɵelement(1, "mj-loading", 9);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance();
    i0.ɵɵproperty("showText", false);
} }
function KPICardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 7);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r0.data.subtitle, " ");
} }
function KPICardComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 8);
    i0.ɵɵelement(1, "i");
    i0.ɵɵelementStart(2, "span", 10);
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "span", 11);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵclassMap(ctx_r0.getTrendIcon());
    i0.ɵɵstyleProp("color", ctx_r0.getTrendColor());
    i0.ɵɵadvance();
    i0.ɵɵstyleProp("color", ctx_r0.getTrendColor());
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r0.data.trend.percentage, "% ");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r0.data.trend.period);
} }
export class KPICardComponent {
    data;
    ngOnInit() {
        if (!this.data) {
            throw new Error('KPICardComponent requires data input');
        }
    }
    formatValue(value) {
        if (typeof value === 'number') {
            // Format large numbers with appropriate suffixes
            if (value >= 1000000) {
                return (value / 1000000).toFixed(1) + 'M';
            }
            else if (value >= 1000) {
                return (value / 1000).toFixed(1) + 'K';
            }
            else if (value % 1 !== 0) {
                return value.toFixed(2);
            }
            return value.toString();
        }
        return value;
    }
    getTrendIcon() {
        if (!this.data.trend)
            return '';
        switch (this.data.trend.direction) {
            case 'up':
                return 'fa-solid fa-arrow-up';
            case 'down':
                return 'fa-solid fa-arrow-down';
            case 'stable':
                return 'fa-solid fa-minus';
            default:
                return '';
        }
    }
    getTrendColor() {
        if (!this.data.trend)
            return 'var(--mj-text-disabled)';
        switch (this.data.trend.direction) {
            case 'up':
                return 'var(--mj-status-success)';
            case 'down':
                return 'var(--mj-status-error)';
            case 'stable':
                return 'var(--mj-text-disabled)';
            default:
                return 'var(--mj-text-disabled)';
        }
    }
    static ɵfac = function KPICardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || KPICardComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: KPICardComponent, selectors: [["app-kpi-card"]], inputs: { data: "data" }, standalone: false, decls: 11, vars: 9, consts: [[1, "kpi-card"], [1, "kpi-card__header"], [1, "kpi-card__icon"], [1, "kpi-card__title"], [1, "kpi-card__content"], [1, "kpi-card__value"], [1, "kpi-card__loading"], [1, "kpi-card__subtitle"], [1, "kpi-card__trend"], ["size", "small", 3, "showText"], [1, "trend-percentage"], [1, "trend-period"]], template: function KPICardComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
            i0.ɵɵelement(3, "i");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(4, "div", 3);
            i0.ɵɵtext(5);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(6, "div", 4);
            i0.ɵɵconditionalCreate(7, KPICardComponent_Conditional_7_Template, 2, 1, "div", 5);
            i0.ɵɵconditionalCreate(8, KPICardComponent_Conditional_8_Template, 2, 1, "div", 6);
            i0.ɵɵconditionalCreate(9, KPICardComponent_Conditional_9_Template, 2, 1, "div", 7);
            i0.ɵɵconditionalCreate(10, KPICardComponent_Conditional_10_Template, 6, 8, "div", 8);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵclassMap("kpi-card--" + ctx.data.color);
            i0.ɵɵadvance(3);
            i0.ɵɵclassMap("fa-solid " + ctx.data.icon);
            i0.ɵɵadvance(2);
            i0.ɵɵtextInterpolate(ctx.data.title);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(!ctx.data.loading ? 7 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.data.loading ? 8 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.data.subtitle && !ctx.data.loading ? 9 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.data.trend && !ctx.data.loading ? 10 : -1);
        } }, dependencies: [i1.LoadingComponent], styles: [".kpi-card[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 16px;\n      padding: 20px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n      border: 1px solid var(--mj-border-default);\n      border-left: 4px solid transparent;\n      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n      min-height: 130px;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .kpi-card[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n      transform: translateY(-3px);\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n    }\n\n    .kpi-card--primary[_ngcontent-%COMP%] { border-left-color: var(--mj-brand-primary); }\n    .kpi-card--success[_ngcontent-%COMP%] { border-left-color: var(--mj-status-success); }\n    .kpi-card--warning[_ngcontent-%COMP%] { border-left-color: var(--mj-status-warning); }\n    .kpi-card--danger[_ngcontent-%COMP%] { border-left-color: var(--mj-status-error); }\n    .kpi-card--info[_ngcontent-%COMP%] { border-left-color: var(--mj-brand-accent); }\n\n    .kpi-card__header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .kpi-card__icon[_ngcontent-%COMP%] {\n      width: 36px;\n      height: 36px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 12px;\n      font-size: 15px;\n    }\n\n    .kpi-card--primary[_ngcontent-%COMP%]   .kpi-card__icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n    .kpi-card--success[_ngcontent-%COMP%]   .kpi-card__icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n    .kpi-card--warning[_ngcontent-%COMP%]   .kpi-card__icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n    .kpi-card--danger[_ngcontent-%COMP%]   .kpi-card__icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n    .kpi-card--info[_ngcontent-%COMP%]   .kpi-card__icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-accent) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-accent);\n    }\n\n    .kpi-card__title[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-card__content[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .kpi-card__value[_ngcontent-%COMP%] {\n      font-size: 26px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n      line-height: 1.1;\n      letter-spacing: -0.02em;\n    }\n\n    .kpi-card__subtitle[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .kpi-card__trend[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      font-size: 11px;\n      gap: 4px;\n    }\n\n    .trend-percentage[_ngcontent-%COMP%] {\n      font-weight: 600;\n    }\n\n    .trend-period[_ngcontent-%COMP%] {\n      color: var(--mj-text-disabled);\n    }\n\n    .kpi-card__loading[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 60px;\n    }\n\n    @media (max-width: 768px) {\n      .kpi-card[_ngcontent-%COMP%] {\n        min-height: 110px;\n        padding: 16px;\n      }\n\n      .kpi-card__value[_ngcontent-%COMP%] {\n        font-size: 22px;\n      }\n\n      .kpi-card__icon[_ngcontent-%COMP%] {\n        width: 32px;\n        height: 32px;\n        font-size: 13px;\n      }\n    }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(KPICardComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'app-kpi-card', template: `
    <div class="kpi-card" [class]="'kpi-card--' + data.color">
      <div class="kpi-card__header">
        <div class="kpi-card__icon">
          <i [class]="'fa-solid ' + data.icon"></i>
        </div>
        <div class="kpi-card__title">{{ data.title }}</div>
      </div>
    
      <div class="kpi-card__content">
        @if (!data.loading) {
          <div class="kpi-card__value">
            {{ formatValue(data.value) }}
          </div>
        }
        @if (data.loading) {
          <div class="kpi-card__loading">
            <mj-loading [showText]="false" size="small"></mj-loading>
          </div>
        }
    
        @if (data.subtitle && !data.loading) {
          <div class="kpi-card__subtitle">
            {{ data.subtitle }}
          </div>
        }
    
        @if (data.trend && !data.loading) {
          <div class="kpi-card__trend">
            <i [class]="getTrendIcon()" [style.color]="getTrendColor()"></i>
            <span class="trend-percentage" [style.color]="getTrendColor()">
              {{ data.trend.percentage }}%
            </span>
            <span class="trend-period">{{ data.trend.period }}</span>
          </div>
        }
      </div>
    </div>
    `, styles: ["\n    .kpi-card {\n      background: var(--mj-bg-surface);\n      border-radius: 16px;\n      padding: 20px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n      border: 1px solid var(--mj-border-default);\n      border-left: 4px solid transparent;\n      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n      min-height: 130px;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .kpi-card:hover {\n      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n      transform: translateY(-3px);\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n    }\n\n    .kpi-card--primary { border-left-color: var(--mj-brand-primary); }\n    .kpi-card--success { border-left-color: var(--mj-status-success); }\n    .kpi-card--warning { border-left-color: var(--mj-status-warning); }\n    .kpi-card--danger { border-left-color: var(--mj-status-error); }\n    .kpi-card--info { border-left-color: var(--mj-brand-accent); }\n\n    .kpi-card__header {\n      display: flex;\n      align-items: center;\n      margin-bottom: 12px;\n    }\n\n    .kpi-card__icon {\n      width: 36px;\n      height: 36px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: 12px;\n      font-size: 15px;\n    }\n\n    .kpi-card--primary .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n    .kpi-card--success .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n    .kpi-card--warning .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n    .kpi-card--danger .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n    .kpi-card--info .kpi-card__icon {\n      background: color-mix(in srgb, var(--mj-brand-accent) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-accent);\n    }\n\n    .kpi-card__title {\n      font-size: 11px;\n      font-weight: 700;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-card__content {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n\n    .kpi-card__value {\n      font-size: 26px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n      line-height: 1.1;\n      letter-spacing: -0.02em;\n    }\n\n    .kpi-card__subtitle {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-bottom: 6px;\n    }\n\n    .kpi-card__trend {\n      display: flex;\n      align-items: center;\n      font-size: 11px;\n      gap: 4px;\n    }\n\n    .trend-percentage {\n      font-weight: 600;\n    }\n\n    .trend-period {\n      color: var(--mj-text-disabled);\n    }\n\n    .kpi-card__loading {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 60px;\n    }\n\n    @media (max-width: 768px) {\n      .kpi-card {\n        min-height: 110px;\n        padding: 16px;\n      }\n\n      .kpi-card__value {\n        font-size: 22px;\n      }\n\n      .kpi-card__icon {\n        width: 32px;\n        height: 32px;\n        font-size: 13px;\n      }\n    }\n  "] }]
    }], null, { data: [{
            type: Input
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(KPICardComponent, { className: "KPICardComponent", filePath: "src/AI/components/widgets/kpi-card.component.ts", lineNumber: 194 }); })();
//# sourceMappingURL=kpi-card.component.js.map