import { Component, inject, Input, Output, EventEmitter } from '@angular/core';
import { IonCard, IonCardContent, IonIcon, IonSkeletonText } from '@ionic/angular/standalone';
import { CommonModule } from '@angular/common';
import { PresetService } from '../../../services/presets';
import { addIcons } from 'ionicons';
import { trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, heart, star } from 'ionicons/icons';
import * as i0 from "@angular/core";
addIcons({ trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, heart, star });
/**
 * val-stats-card
 *
 * A card component for displaying statistics and KPIs.
 * Supports presets for reusable configurations.
 *
 * @example With preset:
 * <val-stats-card preset="kpi" [props]="{ title: 'Users', value: 1000 }"></val-stats-card>
 *
 * @example Basic usage
 * <val-stats-card [props]="{
 *   title: 'Total Users',
 *   value: 12500,
 *   icon: 'people',
 *   color: 'primary'
 * }"></val-stats-card>
 *
 * @input preset: string - Name of preset to apply
 * @input props: StatsCardMetadata - Configuration for the stats card
 * @output onClick: void - Emits when card is clicked
 */
export class StatsCardComponent {
    constructor() {
        this.presets = inject(PresetService);
        this.props = {};
        this.resolvedProps = {};
        this.onClick = new EventEmitter();
        this.Math = Math;
    }
    ngOnInit() {
        this.resolveProps();
    }
    ngOnChanges(changes) {
        if (changes['preset'] || changes['props']) {
            this.resolveProps();
        }
    }
    resolveProps() {
        const presetProps = this.preset ? this.presets.get('statsCard', this.preset) : {};
        this.resolvedProps = {
            ...presetProps,
            ...this.props,
        };
    }
    getCardColor() {
        const color = this.resolvedProps.color || 'primary';
        return `var(--ion-color-${color})`;
    }
    getBackgroundClass() {
        const bg = this.resolvedProps.background || 'light';
        return `background-${bg}`;
    }
    getTrendClass() {
        const direction = this.resolvedProps.trend?.direction || 'neutral';
        const invert = this.resolvedProps.trend?.invertColors;
        if (direction === 'neutral')
            return 'trend-neutral';
        if (direction === 'up')
            return invert ? 'trend-down' : 'trend-up';
        return invert ? 'trend-up' : 'trend-down';
    }
    getTrendIcon() {
        const direction = this.resolvedProps.trend?.direction || 'neutral';
        if (direction === 'up')
            return 'trending-up';
        if (direction === 'down')
            return 'trending-down';
        return 'remove';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatsCardComponent, isStandalone: true, selector: "val-stats-card", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
    <ion-card
      class="stats-card"
      [class]="getBackgroundClass()"
      [style.--card-color]="getCardColor()"
      [style.min-height.px]="resolvedProps.minHeight"
      (click)="onClick.emit()"
    >
      <ion-card-content>
        <div class="stats-header">
          <span class="stats-title">{{ resolvedProps.title }}</span>
          @if (resolvedProps.icon) {
            <ion-icon [name]="resolvedProps.icon" class="stats-icon"></ion-icon>
          }
        </div>

        <div class="stats-value">
          @if (resolvedProps.loading) {
            <ion-skeleton-text [animated]="true" style="width: 60%; height: 32px;"></ion-skeleton-text>
          } @else {
            @if (resolvedProps.prefix) {
              <span class="prefix">{{ resolvedProps.prefix }}</span>
            }
            <span class="value">{{ resolvedProps.value }}</span>
            @if (resolvedProps.suffix) {
              <span class="suffix">{{ resolvedProps.suffix }}</span>
            }
          }
        </div>

        @if (resolvedProps.trend && !resolvedProps.loading) {
          <div class="stats-trend" [class]="getTrendClass()">
            <ion-icon [name]="getTrendIcon()"></ion-icon>
            <span class="trend-value">{{ Math.abs(resolvedProps.trend.value) }}%</span>
            @if (resolvedProps.trend.label) {
              <span class="trend-label">{{ resolvedProps.trend.label }}</span>
            }
          </div>
        }

        @if (resolvedProps.footer && !resolvedProps.loading) {
          <div class="stats-footer">{{ resolvedProps.footer }}</div>
        }

        @if (resolvedProps.description && !resolvedProps.loading) {
          <div class="stats-description">{{ resolvedProps.description }}</div>
        }

        @if (resolvedProps.logo && !resolvedProps.loading) {
          <div class="stats-logo">
            <img
              [src]="resolvedProps.logo.src"
              [alt]="resolvedProps.logo.alt"
              [style.max-height.px]="resolvedProps.logo.maxHeight || 32"
              [style.max-width.px]="resolvedProps.logo.maxWidth || 120"
            />
          </div>
        }
      </ion-card-content>
    </ion-card>
  `, isInline: true, styles: [":host{display:block}.stats-card{margin:0;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}.stats-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f}.stats-card.background-light{--background: var(--ion-color-light)}.stats-card.background-light .stats-title,.stats-card.background-light .stats-footer{color:var(--ion-color-medium)}.stats-card.background-light .stats-value{color:var(--ion-text-color)}.stats-card.background-light .stats-icon{color:var(--card-color);opacity:.8}.stats-card.background-solid{--background: var(--card-color)}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer,.stats-card.background-solid .stats-value,.stats-card.background-solid .stats-icon{color:#fff}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer{opacity:.9}.stats-card.background-gradient{--background: linear-gradient(135deg, var(--card-color), var(--card-color-shade, var(--card-color)))}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer,.stats-card.background-gradient .stats-value,.stats-card.background-gradient .stats-icon{color:#fff}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer{opacity:.9}ion-card-content{padding:16px}.stats-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.stats-title{font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stats-icon{font-size:1.5rem}.stats-value{font-size:1.75rem;font-weight:700;line-height:1.2;margin-bottom:8px}.stats-value .prefix,.stats-value .suffix{font-size:1.125rem;font-weight:500;opacity:.8}.stats-value .prefix{margin-right:2px}.stats-value .suffix{margin-left:4px}.stats-trend{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:500;padding:4px 8px;border-radius:12px;margin-bottom:8px}.stats-trend ion-icon{font-size:1rem}.stats-trend.trend-up{background-color:rgba(var(--ion-color-success-rgb),.15);color:var(--ion-color-success)}.stats-trend.trend-down{background-color:rgba(var(--ion-color-danger-rgb),.15);color:var(--ion-color-danger)}.stats-trend.trend-neutral{background-color:rgba(var(--ion-color-medium-rgb),.15);color:var(--ion-color-medium)}.stats-trend .trend-label{font-weight:400;opacity:.8;margin-left:4px}.stats-footer{font-size:.75rem;margin-top:4px}.stats-description{margin-top:8px;font-size:.875rem;line-height:1.4;color:var(--ion-text-color);opacity:.8}.stats-logo{margin-top:16px;padding-top:12px;border-top:1px solid rgba(var(--ion-text-color-rgb),.1)}.stats-logo img{display:block;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:filter .2s,opacity .2s}.stats-logo:hover img{filter:grayscale(0%);opacity:1}.background-solid .stats-description,.background-gradient .stats-description{color:#fff;opacity:.9}.background-solid .stats-logo,.background-gradient .stats-logo{border-top-color:#fff3}.background-solid .stats-logo img,.background-gradient .stats-logo img{filter:grayscale(100%) brightness(10)}.background-solid .stats-logo:hover img,.background-gradient .stats-logo:hover img{filter:brightness(10)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatsCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-stats-card', standalone: true, imports: [CommonModule, IonCard, IonCardContent, IonIcon, IonSkeletonText], template: `
    <ion-card
      class="stats-card"
      [class]="getBackgroundClass()"
      [style.--card-color]="getCardColor()"
      [style.min-height.px]="resolvedProps.minHeight"
      (click)="onClick.emit()"
    >
      <ion-card-content>
        <div class="stats-header">
          <span class="stats-title">{{ resolvedProps.title }}</span>
          @if (resolvedProps.icon) {
            <ion-icon [name]="resolvedProps.icon" class="stats-icon"></ion-icon>
          }
        </div>

        <div class="stats-value">
          @if (resolvedProps.loading) {
            <ion-skeleton-text [animated]="true" style="width: 60%; height: 32px;"></ion-skeleton-text>
          } @else {
            @if (resolvedProps.prefix) {
              <span class="prefix">{{ resolvedProps.prefix }}</span>
            }
            <span class="value">{{ resolvedProps.value }}</span>
            @if (resolvedProps.suffix) {
              <span class="suffix">{{ resolvedProps.suffix }}</span>
            }
          }
        </div>

        @if (resolvedProps.trend && !resolvedProps.loading) {
          <div class="stats-trend" [class]="getTrendClass()">
            <ion-icon [name]="getTrendIcon()"></ion-icon>
            <span class="trend-value">{{ Math.abs(resolvedProps.trend.value) }}%</span>
            @if (resolvedProps.trend.label) {
              <span class="trend-label">{{ resolvedProps.trend.label }}</span>
            }
          </div>
        }

        @if (resolvedProps.footer && !resolvedProps.loading) {
          <div class="stats-footer">{{ resolvedProps.footer }}</div>
        }

        @if (resolvedProps.description && !resolvedProps.loading) {
          <div class="stats-description">{{ resolvedProps.description }}</div>
        }

        @if (resolvedProps.logo && !resolvedProps.loading) {
          <div class="stats-logo">
            <img
              [src]="resolvedProps.logo.src"
              [alt]="resolvedProps.logo.alt"
              [style.max-height.px]="resolvedProps.logo.maxHeight || 32"
              [style.max-width.px]="resolvedProps.logo.maxWidth || 120"
            />
          </div>
        }
      </ion-card-content>
    </ion-card>
  `, styles: [":host{display:block}.stats-card{margin:0;border-radius:12px;cursor:pointer;transition:transform .2s,box-shadow .2s}.stats-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f}.stats-card.background-light{--background: var(--ion-color-light)}.stats-card.background-light .stats-title,.stats-card.background-light .stats-footer{color:var(--ion-color-medium)}.stats-card.background-light .stats-value{color:var(--ion-text-color)}.stats-card.background-light .stats-icon{color:var(--card-color);opacity:.8}.stats-card.background-solid{--background: var(--card-color)}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer,.stats-card.background-solid .stats-value,.stats-card.background-solid .stats-icon{color:#fff}.stats-card.background-solid .stats-title,.stats-card.background-solid .stats-footer{opacity:.9}.stats-card.background-gradient{--background: linear-gradient(135deg, var(--card-color), var(--card-color-shade, var(--card-color)))}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer,.stats-card.background-gradient .stats-value,.stats-card.background-gradient .stats-icon{color:#fff}.stats-card.background-gradient .stats-title,.stats-card.background-gradient .stats-footer{opacity:.9}ion-card-content{padding:16px}.stats-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.stats-title{font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stats-icon{font-size:1.5rem}.stats-value{font-size:1.75rem;font-weight:700;line-height:1.2;margin-bottom:8px}.stats-value .prefix,.stats-value .suffix{font-size:1.125rem;font-weight:500;opacity:.8}.stats-value .prefix{margin-right:2px}.stats-value .suffix{margin-left:4px}.stats-trend{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:500;padding:4px 8px;border-radius:12px;margin-bottom:8px}.stats-trend ion-icon{font-size:1rem}.stats-trend.trend-up{background-color:rgba(var(--ion-color-success-rgb),.15);color:var(--ion-color-success)}.stats-trend.trend-down{background-color:rgba(var(--ion-color-danger-rgb),.15);color:var(--ion-color-danger)}.stats-trend.trend-neutral{background-color:rgba(var(--ion-color-medium-rgb),.15);color:var(--ion-color-medium)}.stats-trend .trend-label{font-weight:400;opacity:.8;margin-left:4px}.stats-footer{font-size:.75rem;margin-top:4px}.stats-description{margin-top:8px;font-size:.875rem;line-height:1.4;color:var(--ion-text-color);opacity:.8}.stats-logo{margin-top:16px;padding-top:12px;border-top:1px solid rgba(var(--ion-text-color-rgb),.1)}.stats-logo img{display:block;object-fit:contain;filter:grayscale(100%);opacity:.7;transition:filter .2s,opacity .2s}.stats-logo:hover img{filter:grayscale(0%);opacity:1}.background-solid .stats-description,.background-gradient .stats-description{color:#fff;opacity:.9}.background-solid .stats-logo,.background-gradient .stats-logo{border-top-color:#fff3}.background-solid .stats-logo img,.background-gradient .stats-logo img{filter:grayscale(100%) brightness(10)}.background-solid .stats-logo:hover img,.background-gradient .stats-logo:hover img{filter:brightness(10)}\n"] }]
        }], propDecorators: { preset: [{
                type: Input
            }], props: [{
                type: Input
            }], onClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 