import { CommonModule } from '@angular/common';
import { Component, computed, input } from '@angular/core';
import { STATS_BAR_DEFAULTS } from './types';
import * as i0 from "@angular/core";
const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
/**
 * val-stats-bar
 *
 * Horizontal row of headline stats separated by dividers (AWS / SES "Daily
 * email usage" style). Stacks vertically on mobile.
 *
 * Presentational: values + labels are passed already resolved/formatted.
 *
 * @example
 * ```html
 * <val-stats-bar
 *   [props]="{
 *     stats: [
 *       { label: 'Emails sent', value: 0 },
 *       { label: 'Remaining sends', value: 200 },
 *       { label: 'Sending quota used', value: '0.00', suffix: '%' }
 *     ]
 *   }"
 * />
 * ```
 */
export class StatsBarComponent {
    constructor() {
        /** Component configuration */
        this.props = input({});
        /** Merged configuration with defaults */
        this.config = computed(() => ({
            ...STATS_BAR_DEFAULTS,
            stats: [],
            ...this.props(),
        }));
    }
    getColor(stat) {
        const color = stat.color;
        if (!color)
            return null;
        return IONIC_COLORS.includes(color) ? `var(--ion-color-${color})` : color;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: StatsBarComponent, isStandalone: true, selector: "val-stats-bar", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
    <div
      class="stats-bar"
      [class.stats-bar--dividers]="config().dividers"
      [class.stats-bar--center]="config().align === 'center'"
      [class.stats-bar--spaced]="config().align === 'spaced'"
      [class.stats-bar--medium]="config().size === 'medium'"
      [class.stats-bar--stack]="config().stackOnMobile"
    >
      @for (stat of config().stats; track $index) {
        <div class="stats-bar__item">
          <span class="stats-bar__label">{{ stat.label }}</span>
          <span class="stats-bar__value" [style.color]="getColor(stat)">
            @if (stat.prefix) {
              <span class="stats-bar__affix">{{ stat.prefix }}</span>
            }
            {{ stat.value }}
            @if (stat.suffix) {
              <span class="stats-bar__affix">{{ stat.suffix }}</span>
            }
          </span>
        </div>
      }
    </div>
  `, isInline: true, styles: [":host{display:block}.stats-bar{display:flex;flex-wrap:wrap;align-items:stretch;gap:2rem}.stats-bar--center{justify-content:center}.stats-bar--spaced{justify-content:space-between}.stats-bar--dividers .stats-bar__item:not(:first-child){padding-left:2rem;border-left:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.stats-bar__item{display:flex;flex-direction:column;gap:.25rem;min-width:0}.stats-bar__label{font-size:.875rem;font-weight:600;color:var(--ion-text-color)}.stats-bar__value{font-size:2.75rem;font-weight:800;line-height:1.05;color:var(--ion-text-color);letter-spacing:-.02em}.stats-bar__affix{font-size:.6em;font-weight:700}.stats-bar--medium .stats-bar__value{font-size:1.75rem}@media (max-width: 576px){.stats-bar--stack{flex-direction:column;gap:1.25rem}.stats-bar--stack .stats-bar__item:not(:first-child){padding-left:0;border-left:none}.stats-bar--stack.stats-bar--dividers .stats-bar__item:not(:first-child){padding-top:1.25rem;border-top:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}}:host-context(.dark) .stats-bar--dividers .stats-bar__item:not(:first-child),:host-context(.ion-palette-dark) .stats-bar--dividers .stats-bar__item:not(:first-child),:host-context(html.ion-palette-dark) .stats-bar--dividers .stats-bar__item:not(:first-child),:host-context(body.dark) .stats-bar--dividers .stats-bar__item:not(:first-child),:host-context([data-theme=dark]) .stats-bar--dividers .stats-bar__item:not(:first-child){border-left-color:#ffffff1f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StatsBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-stats-bar', standalone: true, imports: [CommonModule], template: `
    <div
      class="stats-bar"
      [class.stats-bar--dividers]="config().dividers"
      [class.stats-bar--center]="config().align === 'center'"
      [class.stats-bar--spaced]="config().align === 'spaced'"
      [class.stats-bar--medium]="config().size === 'medium'"
      [class.stats-bar--stack]="config().stackOnMobile"
    >
      @for (stat of config().stats; track $index) {
        <div class="stats-bar__item">
          <span class="stats-bar__label">{{ stat.label }}</span>
          <span class="stats-bar__value" [style.color]="getColor(stat)">
            @if (stat.prefix) {
              <span class="stats-bar__affix">{{ stat.prefix }}</span>
            }
            {{ stat.value }}
            @if (stat.suffix) {
              <span class="stats-bar__affix">{{ stat.suffix }}</span>
            }
          </span>
        </div>
      }
    </div>
  `, styles: [":host{display:block}.stats-bar{display:flex;flex-wrap:wrap;align-items:stretch;gap:2rem}.stats-bar--center{justify-content:center}.stats-bar--spaced{justify-content:space-between}.stats-bar--dividers .stats-bar__item:not(:first-child){padding-left:2rem;border-left:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.stats-bar__item{display:flex;flex-direction:column;gap:.25rem;min-width:0}.stats-bar__label{font-size:.875rem;font-weight:600;color:var(--ion-text-color)}.stats-bar__value{font-size:2.75rem;font-weight:800;line-height:1.05;color:var(--ion-text-color);letter-spacing:-.02em}.stats-bar__affix{font-size:.6em;font-weight:700}.stats-bar--medium .stats-bar__value{font-size:1.75rem}@media (max-width: 576px){.stats-bar--stack{flex-direction:column;gap:1.25rem}.stats-bar--stack .stats-bar__item:not(:first-child){padding-left:0;border-left:none}.stats-bar--stack.stats-bar--dividers .stats-bar__item:not(:first-child){padding-top:1.25rem;border-top:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}}:host-context(.dark) .stats-bar--dividers .stats-bar__item:not(:first-child),:host-context(.ion-palette-dark) .stats-bar--dividers .stats-bar__item:not(:first-child),:host-context(html.ion-palette-dark) .stats-bar--dividers .stats-bar__item:not(:first-child),:host-context(body.dark) .stats-bar--dividers .stats-bar__item:not(:first-child),:host-context([data-theme=dark]) .stats-bar--dividers .stats-bar__item:not(:first-child){border-left-color:#ffffff1f}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 