import { CommonModule } from '@angular/common';
import { Component, computed, input } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone';
import { INFO_CARD_DEFAULTS } from './types';
import * as i0 from "@angular/core";
const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
/**
 * val-info-card
 *
 * Card with icon + overtitle + title + subtitle on the left side, and a list
 * of key-value pairs (label: value) on the right side. Inspired by npm's
 * "Provenance" / metadata panel style.
 *
 * Two-column layout on desktop, stacked single-column on mobile.
 *
 * Presentational — pass already-resolved strings.
 *
 * @example
 * ```html
 * <val-info-card
 *   [props]="{
 *     icon: 'cube-outline',
 *     title: 'valtech-components',
 *     subtitle: 'v2.0.962',
 *     keyValues: [
 *       { label: 'License', value: 'MIT' },
 *       { label: 'Downloads', value: '1.2M' }
 *     ]
 *   }"
 * />
 * ```
 */
export class InfoCardComponent {
    constructor() {
        /** Component configuration */
        this.props = input({});
        /** Merged configuration with defaults */
        this.config = computed(() => ({
            ...INFO_CARD_DEFAULTS,
            ...this.props(),
        }));
    }
    getIconColor() {
        const color = this.config().iconColor;
        if (!color)
            return `var(--ion-color-primary)`;
        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: InfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: InfoCardComponent, isStandalone: true, selector: "val-info-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
    <div
      class="info-card"
      [class.info-card--bordered]="config().bordered"
      [class.info-card--shadowed]="config().shadowed"
      [style.padding]="config().padding"
      [style.border-radius]="config().borderRadius"
    >
      <div class="info-card__left">
        @if (config().icon) {
          <ion-icon class="info-card__icon" [name]="config().icon" [style.color]="getIconColor()"></ion-icon>
        }

        @if (config().overtitle) {
          <span class="info-card__overtitle">{{ config().overtitle }}</span>
        }

        <h3 class="info-card__title">{{ config().title }}</h3>

        @if (config().subtitle) {
          <p class="info-card__subtitle">{{ config().subtitle }}</p>
        }
      </div>

      @if (config().keyValues?.length) {
        <div class="info-card__right">
          @for (kv of config().keyValues; track $index) {
            <div class="info-card__kv">
              <span class="info-card__kv-label">{{ kv.label }}</span>
              <span class="info-card__kv-value">{{ kv.value }}</span>
            </div>
          }
        </div>
      }
    </div>
  `, isInline: true, styles: [":host{display:block}.info-card{display:flex;flex-direction:row;gap:2rem;background:var(--ion-card-background, var(--ion-background-color))}.info-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.info-card--shadowed{box-shadow:0 2px 8px #00000014}.info-card__left{display:flex;flex-direction:column;gap:.35rem;flex:1 1 0;min-width:0}.info-card__icon{font-size:2rem;margin-bottom:.25rem}.info-card__overtitle{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ion-color-medium)}.info-card__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--ion-text-color);line-height:1.3}.info-card__subtitle{margin:0;font-size:.875rem;color:var(--ion-color-medium-shade)}.info-card__right{display:flex;flex-direction:column;gap:.6rem;flex:0 0 auto;min-width:160px;max-width:260px}.info-card__kv{display:flex;flex-direction:column;gap:.1rem}.info-card__kv-label{font-size:.75rem;color:var(--ion-color-medium)}.info-card__kv-value{font-size:.9rem;font-weight:600;color:var(--ion-text-color);word-break:break-word}@media (max-width: 600px){.info-card{flex-direction:column;gap:1.25rem}.info-card__right{max-width:100%;flex-direction:row;flex-wrap:wrap;gap:.75rem 1.5rem}.info-card__kv{flex:0 0 auto}}:host-context(body.dark) .info-card--bordered,:host-context(html.ion-palette-dark) .info-card--bordered,:host-context([data-theme=dark]) .info-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .info-card--shadowed,:host-context(html.ion-palette-dark) .info-card--shadowed,:host-context([data-theme=dark]) .info-card--shadowed{box-shadow:0 2px 8px #0000004d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InfoCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-info-card', standalone: true, imports: [CommonModule, IonIcon], template: `
    <div
      class="info-card"
      [class.info-card--bordered]="config().bordered"
      [class.info-card--shadowed]="config().shadowed"
      [style.padding]="config().padding"
      [style.border-radius]="config().borderRadius"
    >
      <div class="info-card__left">
        @if (config().icon) {
          <ion-icon class="info-card__icon" [name]="config().icon" [style.color]="getIconColor()"></ion-icon>
        }

        @if (config().overtitle) {
          <span class="info-card__overtitle">{{ config().overtitle }}</span>
        }

        <h3 class="info-card__title">{{ config().title }}</h3>

        @if (config().subtitle) {
          <p class="info-card__subtitle">{{ config().subtitle }}</p>
        }
      </div>

      @if (config().keyValues?.length) {
        <div class="info-card__right">
          @for (kv of config().keyValues; track $index) {
            <div class="info-card__kv">
              <span class="info-card__kv-label">{{ kv.label }}</span>
              <span class="info-card__kv-value">{{ kv.value }}</span>
            </div>
          }
        </div>
      }
    </div>
  `, styles: [":host{display:block}.info-card{display:flex;flex-direction:row;gap:2rem;background:var(--ion-card-background, var(--ion-background-color))}.info-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.info-card--shadowed{box-shadow:0 2px 8px #00000014}.info-card__left{display:flex;flex-direction:column;gap:.35rem;flex:1 1 0;min-width:0}.info-card__icon{font-size:2rem;margin-bottom:.25rem}.info-card__overtitle{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ion-color-medium)}.info-card__title{margin:0;font-size:1.25rem;font-weight:700;color:var(--ion-text-color);line-height:1.3}.info-card__subtitle{margin:0;font-size:.875rem;color:var(--ion-color-medium-shade)}.info-card__right{display:flex;flex-direction:column;gap:.6rem;flex:0 0 auto;min-width:160px;max-width:260px}.info-card__kv{display:flex;flex-direction:column;gap:.1rem}.info-card__kv-label{font-size:.75rem;color:var(--ion-color-medium)}.info-card__kv-value{font-size:.9rem;font-weight:600;color:var(--ion-text-color);word-break:break-word}@media (max-width: 600px){.info-card{flex-direction:column;gap:1.25rem}.info-card__right{max-width:100%;flex-direction:row;flex-wrap:wrap;gap:.75rem 1.5rem}.info-card__kv{flex:0 0 auto}}:host-context(body.dark) .info-card--bordered,:host-context(html.ion-palette-dark) .info-card--bordered,:host-context([data-theme=dark]) .info-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .info-card--shadowed,:host-context(html.ion-palette-dark) .info-card--shadowed,:host-context([data-theme=dark]) .info-card--shadowed{box-shadow:0 2px 8px #0000004d}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 