import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, input, Output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IonButton, IonIcon } from '@ionic/angular/standalone';
import { StatsBarComponent } from '../stats-bar/stats-bar.component';
import { METRIC_CARD_DEFAULTS } from './types';
import * as i0 from "@angular/core";
/**
 * val-metric-card
 *
 * Card with title + optional info link + description + horizontal stats row
 * (val-stats-bar) + a discrete icon action button in the top-right corner.
 *
 * Presentational — pass already-resolved strings.
 *
 * @example
 * ```html
 * <val-metric-card
 *   [props]="{
 *     title: 'Email Activity',
 *     description: 'Last 30 days',
 *     stats: { stats: [{ label: 'Sent', value: 1240 }, { label: 'Opens', value: 680 }] },
 *     action: { icon: 'refresh-outline', token: 'refresh' }
 *   }"
 *   (onAction)="handleAction($event)"
 * />
 * ```
 */
export class MetricCardComponent {
    constructor() {
        /** Component configuration */
        this.props = input({});
        /** Emitted with the token of the clicked action */
        this.onAction = new EventEmitter();
        /** Merged configuration with defaults */
        this.config = computed(() => ({
            ...METRIC_CARD_DEFAULTS,
            ...this.props(),
        }));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MetricCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MetricCardComponent, isStandalone: true, selector: "val-metric-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: `
    <div
      class="metric-card"
      [class.metric-card--bordered]="config().bordered"
      [class.metric-card--shadowed]="config().shadowed"
      [style.padding]="config().padding"
      [style.border-radius]="config().borderRadius"
    >
      <div class="metric-card__header">
        <div class="metric-card__header-left">
          <h3 class="metric-card__title">{{ config().title }}</h3>

          @if (config().infoLabel) {
            <a
              class="metric-card__info-link"
              [routerLink]="config().infoRoute ?? null"
              [attr.href]="config().infoHref ?? null"
              [attr.target]="config().infoHref ? '_blank' : null"
              [attr.rel]="config().infoHref ? 'noopener noreferrer' : null"
            >
              {{ config().infoLabel }}
            </a>
          }
        </div>

        @if (config().action; as action) {
          <ion-button
            class="metric-card__action"
            fill="clear"
            size="small"
            [disabled]="action.disabled ?? false"
            (click)="onAction.emit(action.token)"
          >
            <ion-icon [name]="action.icon" slot="icon-only"></ion-icon>
          </ion-button>
        }
      </div>

      @if (config().description) {
        <p class="metric-card__description">{{ config().description }}</p>
      }

      @if (config().stats; as stats) {
        <div class="metric-card__stats">
          <val-stats-bar [props]="stats"></val-stats-bar>
        </div>
      }
    </div>
  `, isInline: true, styles: [":host{display:block}.metric-card{background:var(--ion-card-background, var(--ion-background-color))}.metric-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.metric-card--shadowed{box-shadow:0 2px 8px #00000014}.metric-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}.metric-card__header-left{display:flex;flex-direction:column;gap:.2rem;flex:1 1 0;min-width:0}.metric-card__title{margin:0;font-size:1rem;font-weight:700;color:var(--ion-text-color);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-card__info-link{font-size:.8rem;font-weight:500;color:var(--ion-color-primary);text-decoration:none;transition:opacity .15s ease;width:fit-content}.metric-card__info-link:hover{opacity:.75;text-decoration:underline}.metric-card__action{flex-shrink:0;margin:-6px -8px 0 0}.metric-card__description{margin:0 0 .75rem;font-size:.875rem;color:var(--ion-color-medium-shade);line-height:1.5}.metric-card__stats{margin-top:.5rem}:host-context(body.dark) .metric-card--bordered,:host-context(html.ion-palette-dark) .metric-card--bordered,:host-context([data-theme=dark]) .metric-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .metric-card--shadowed,:host-context(html.ion-palette-dark) .metric-card--shadowed,:host-context([data-theme=dark]) .metric-card--shadowed{box-shadow:0 2px 8px #0000004d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: StatsBarComponent, selector: "val-stats-bar", inputs: ["props"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MetricCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-metric-card', standalone: true, imports: [CommonModule, RouterLink, IonButton, IonIcon, StatsBarComponent], template: `
    <div
      class="metric-card"
      [class.metric-card--bordered]="config().bordered"
      [class.metric-card--shadowed]="config().shadowed"
      [style.padding]="config().padding"
      [style.border-radius]="config().borderRadius"
    >
      <div class="metric-card__header">
        <div class="metric-card__header-left">
          <h3 class="metric-card__title">{{ config().title }}</h3>

          @if (config().infoLabel) {
            <a
              class="metric-card__info-link"
              [routerLink]="config().infoRoute ?? null"
              [attr.href]="config().infoHref ?? null"
              [attr.target]="config().infoHref ? '_blank' : null"
              [attr.rel]="config().infoHref ? 'noopener noreferrer' : null"
            >
              {{ config().infoLabel }}
            </a>
          }
        </div>

        @if (config().action; as action) {
          <ion-button
            class="metric-card__action"
            fill="clear"
            size="small"
            [disabled]="action.disabled ?? false"
            (click)="onAction.emit(action.token)"
          >
            <ion-icon [name]="action.icon" slot="icon-only"></ion-icon>
          </ion-button>
        }
      </div>

      @if (config().description) {
        <p class="metric-card__description">{{ config().description }}</p>
      }

      @if (config().stats; as stats) {
        <div class="metric-card__stats">
          <val-stats-bar [props]="stats"></val-stats-bar>
        </div>
      }
    </div>
  `, styles: [":host{display:block}.metric-card{background:var(--ion-card-background, var(--ion-background-color))}.metric-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.metric-card--shadowed{box-shadow:0 2px 8px #00000014}.metric-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.25rem}.metric-card__header-left{display:flex;flex-direction:column;gap:.2rem;flex:1 1 0;min-width:0}.metric-card__title{margin:0;font-size:1rem;font-weight:700;color:var(--ion-text-color);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.metric-card__info-link{font-size:.8rem;font-weight:500;color:var(--ion-color-primary);text-decoration:none;transition:opacity .15s ease;width:fit-content}.metric-card__info-link:hover{opacity:.75;text-decoration:underline}.metric-card__action{flex-shrink:0;margin:-6px -8px 0 0}.metric-card__description{margin:0 0 .75rem;font-size:.875rem;color:var(--ion-color-medium-shade);line-height:1.5}.metric-card__stats{margin-top:.5rem}:host-context(body.dark) .metric-card--bordered,:host-context(html.ion-palette-dark) .metric-card--bordered,:host-context([data-theme=dark]) .metric-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .metric-card--shadowed,:host-context(html.ion-palette-dark) .metric-card--shadowed,:host-context([data-theme=dark]) .metric-card--shadowed{box-shadow:0 2px 8px #0000004d}\n"] }]
        }], propDecorators: { onAction: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 