import { CommonModule } from '@angular/common';
import { Component, computed, input } from '@angular/core';
import { CONTENT_CARD_DEFAULTS } from './types';
import * as i0 from "@angular/core";
const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
function resolveColor(value) {
    if (!value)
        return undefined;
    return IONIC_COLORS.includes(value) ? `var(--ion-color-${value})` : value;
}
/**
 * val-content-card
 *
 * Generic container card with configurable padding, border radius, background
 * color and shadow. Accepts arbitrary content via ng-content. Use it to wrap
 * val-article, stats, or any other content that needs a card shell.
 *
 * @example
 * ```html
 * <val-content-card [props]="{ title: 'Summary', shadowed: true }">
 *   <p>Any inner content here.</p>
 * </val-content-card>
 * ```
 */
export class ContentCardComponent {
    constructor() {
        /** Component configuration */
        this.props = input({});
        /** Merged configuration with defaults */
        this.config = computed(() => ({
            ...CONTENT_CARD_DEFAULTS,
            ...this.props(),
        }));
        this.resolvedBg = computed(() => resolveColor(this.config().backgroundColor));
        this.resolvedColor = computed(() => resolveColor(this.config().color));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContentCardComponent, isStandalone: true, selector: "val-content-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
    <div
      class="content-card"
      [class.content-card--bordered]="config().bordered"
      [class.content-card--shadowed]="config().shadowed"
      [class.content-card--center]="config().align === 'center'"
      [style.padding]="config().padding"
      [style.border-radius]="config().borderRadius"
      [style.background-color]="resolvedBg()"
      [style.color]="resolvedColor()"
    >
      @if (config().title) {
        <h3 class="content-card__title">{{ config().title }}</h3>
      }

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

      <ng-content></ng-content>
    </div>
  `, isInline: true, styles: [":host{display:block}.content-card{background:var(--ion-card-background, var(--ion-background-color))}.content-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.content-card--shadowed{box-shadow:0 4px 16px #00000014}.content-card--center{text-align:center}.content-card__title{margin:0 0 .5rem;font-size:1.1rem;font-weight:700;color:inherit;line-height:1.3}.content-card__description{margin:0 0 1rem;font-size:.875rem;color:var(--ion-color-medium-shade);line-height:1.5}:host-context(body.dark) .content-card--bordered,:host-context(html.ion-palette-dark) .content-card--bordered,:host-context([data-theme=dark]) .content-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .content-card--shadowed,:host-context(html.ion-palette-dark) .content-card--shadowed,:host-context([data-theme=dark]) .content-card--shadowed{box-shadow:0 4px 16px #0000004d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContentCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-content-card', standalone: true, imports: [CommonModule], template: `
    <div
      class="content-card"
      [class.content-card--bordered]="config().bordered"
      [class.content-card--shadowed]="config().shadowed"
      [class.content-card--center]="config().align === 'center'"
      [style.padding]="config().padding"
      [style.border-radius]="config().borderRadius"
      [style.background-color]="resolvedBg()"
      [style.color]="resolvedColor()"
    >
      @if (config().title) {
        <h3 class="content-card__title">{{ config().title }}</h3>
      }

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

      <ng-content></ng-content>
    </div>
  `, styles: [":host{display:block}.content-card{background:var(--ion-card-background, var(--ion-background-color))}.content-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.content-card--shadowed{box-shadow:0 4px 16px #00000014}.content-card--center{text-align:center}.content-card__title{margin:0 0 .5rem;font-size:1.1rem;font-weight:700;color:inherit;line-height:1.3}.content-card__description{margin:0 0 1rem;font-size:.875rem;color:var(--ion-color-medium-shade);line-height:1.5}:host-context(body.dark) .content-card--bordered,:host-context(html.ion-palette-dark) .content-card--bordered,:host-context([data-theme=dark]) .content-card--bordered{border-color:#ffffff1f}:host-context(body.dark) .content-card--shadowed,:host-context(html.ion-palette-dark) .content-card--shadowed,:host-context([data-theme=dark]) .content-card--shadowed{box-shadow:0 4px 16px #0000004d}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 