import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IonRippleEffect } from '@ionic/angular/standalone';
import { NavigationService } from '../../../services/navigation';
import { ARTICLE_CARD_DEFAULTS } from './types';
import * as i0 from "@angular/core";
const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
/**
 * val-article-card
 *
 * Article / blog teaser card: cover image, topic chip, title, excerpt and date.
 * Clickable (routerLink or external href).
 *
 * Presentational — pass already-resolved/formatted strings (pre-format the date
 * in the consumer with a locale-aware pipe).
 *
 * @example
 * ```html
 * <val-article-card
 *   [props]="{
 *     image: '/assets/post.jpg',
 *     topic: 'Holidays',
 *     title: 'New Holiday Shopping Features',
 *     excerpt: 'A short summary of the article that gets clamped after a few lines.',
 *     date: 'Oct 31, 2025',
 *     routerLink: '/blog/holiday-shopping'
 *   }"
 *   (onClick)="open($event)"
 * />
 * ```
 */
export class ArticleCardComponent {
    constructor() {
        this.navigation = inject(NavigationService);
        /** Component configuration */
        this.props = input({});
        /** Emitted when the card is clicked */
        this.onClick = new EventEmitter();
        /** Merged configuration with defaults */
        this.config = computed(() => ({
            ...ARTICLE_CARD_DEFAULTS,
            ...this.props(),
        }));
        this.isClickable = computed(() => !!this.config().routerLink || !!this.config().href);
    }
    getTopicColor() {
        const color = this.config().topicColor;
        if (!color)
            return 'var(--ion-color-primary)';
        return IONIC_COLORS.includes(color) ? `var(--ion-color-${color})` : color;
    }
    handleClick(event) {
        const cfg = this.config();
        this.onClick.emit({ token: cfg.token, navigated: this.isClickable() });
        if (cfg.href) {
            event.preventDefault();
            this.navigation.openInNewTab(cfg.href);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArticleCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ArticleCardComponent, isStandalone: true, selector: "val-article-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
    <article
      class="article-card"
      [class.article-card--bordered]="config().bordered"
      [class.article-card--shadowed]="config().shadowed"
      [class.article-card--clickable]="isClickable()"
      [routerLink]="config().routerLink ?? null"
      (click)="handleClick($event)"
      [attr.tabindex]="isClickable() ? 0 : null"
      [attr.role]="isClickable() ? 'link' : null"
    >
      @if (isClickable()) {
        <ion-ripple-effect></ion-ripple-effect>
      }

      @if (config().image) {
        <div class="article-card__media" [style.aspect-ratio]="config().aspectRatio">
          <img [src]="config().image" [alt]="config().imageAlt || config().title" />
        </div>
      }

      <div class="article-card__body">
        @if (config().date || config().topic) {
          <div class="article-card__meta">
            @if (config().date) {
              <span class="article-card__date">{{ config().date }}</span>
            }
            @if (config().topic) {
              <span class="article-card__topic" [style.color]="getTopicColor()">{{ config().topic }}</span>
            }
          </div>
        }

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

        @if (config().excerpt) {
          <p class="article-card__excerpt" [style.-webkit-line-clamp]="config().excerptLines">
            {{ config().excerpt }}
          </p>
        }
      </div>
    </article>
  `, isInline: true, styles: [":host{display:flex;flex-direction:column}.article-card{position:relative;display:flex;flex:1;flex-direction:column;background:var(--ion-card-background, var(--ion-background-color));border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;--ripple-color: var(--ion-color-primary)}.article-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.article-card--shadowed{box-shadow:0 2px 8px #00000014}.article-card--clickable{cursor:pointer}.article-card--clickable:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000001f}.article-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.article-card__media{width:100%;overflow:hidden;background:var(--ion-color-light, #f4f5f8)}.article-card__media img{width:100%;height:100%;object-fit:cover;display:block}.article-card__body{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.1rem 1.25rem}.article-card__meta{display:flex;align-items:center;gap:.75rem;font-size:.8rem}.article-card__date{color:var(--ion-color-medium)}.article-card__topic{font-weight:600;color:var(--ion-color-primary)}.article-card__title{margin:0;font-size:1.05rem;font-weight:700;line-height:1.35;color:var(--ion-text-color)}.article-card__excerpt{margin:0;font-size:.9rem;line-height:1.5;color:var(--ion-color-medium-shade);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}:host-context(.dark) .article-card--bordered,:host-context(.ion-palette-dark) .article-card--bordered,:host-context(html.ion-palette-dark) .article-card--bordered,:host-context(body.dark) .article-card--bordered,:host-context([data-theme=dark]) .article-card--bordered{border-color:#ffffff1f}:host-context(.dark) .article-card--shadowed,:host-context(.ion-palette-dark) .article-card--shadowed,:host-context(html.ion-palette-dark) .article-card--shadowed,:host-context(body.dark) .article-card--shadowed,:host-context([data-theme=dark]) .article-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .article-card--clickable:hover,:host-context(.ion-palette-dark) .article-card--clickable:hover,:host-context(html.ion-palette-dark) .article-card--clickable:hover,:host-context(body.dark) .article-card--clickable:hover,:host-context([data-theme=dark]) .article-card--clickable:hover{box-shadow:0 6px 20px #0006}\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: IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ArticleCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-article-card', standalone: true, imports: [CommonModule, RouterLink, IonRippleEffect], template: `
    <article
      class="article-card"
      [class.article-card--bordered]="config().bordered"
      [class.article-card--shadowed]="config().shadowed"
      [class.article-card--clickable]="isClickable()"
      [routerLink]="config().routerLink ?? null"
      (click)="handleClick($event)"
      [attr.tabindex]="isClickable() ? 0 : null"
      [attr.role]="isClickable() ? 'link' : null"
    >
      @if (isClickable()) {
        <ion-ripple-effect></ion-ripple-effect>
      }

      @if (config().image) {
        <div class="article-card__media" [style.aspect-ratio]="config().aspectRatio">
          <img [src]="config().image" [alt]="config().imageAlt || config().title" />
        </div>
      }

      <div class="article-card__body">
        @if (config().date || config().topic) {
          <div class="article-card__meta">
            @if (config().date) {
              <span class="article-card__date">{{ config().date }}</span>
            }
            @if (config().topic) {
              <span class="article-card__topic" [style.color]="getTopicColor()">{{ config().topic }}</span>
            }
          </div>
        }

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

        @if (config().excerpt) {
          <p class="article-card__excerpt" [style.-webkit-line-clamp]="config().excerptLines">
            {{ config().excerpt }}
          </p>
        }
      </div>
    </article>
  `, styles: [":host{display:flex;flex-direction:column}.article-card{position:relative;display:flex;flex:1;flex-direction:column;background:var(--ion-card-background, var(--ion-background-color));border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;--ripple-color: var(--ion-color-primary)}.article-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.article-card--shadowed{box-shadow:0 2px 8px #00000014}.article-card--clickable{cursor:pointer}.article-card--clickable:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000001f}.article-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.article-card__media{width:100%;overflow:hidden;background:var(--ion-color-light, #f4f5f8)}.article-card__media img{width:100%;height:100%;object-fit:cover;display:block}.article-card__body{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.1rem 1.25rem}.article-card__meta{display:flex;align-items:center;gap:.75rem;font-size:.8rem}.article-card__date{color:var(--ion-color-medium)}.article-card__topic{font-weight:600;color:var(--ion-color-primary)}.article-card__title{margin:0;font-size:1.05rem;font-weight:700;line-height:1.35;color:var(--ion-text-color)}.article-card__excerpt{margin:0;font-size:.9rem;line-height:1.5;color:var(--ion-color-medium-shade);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}:host-context(.dark) .article-card--bordered,:host-context(.ion-palette-dark) .article-card--bordered,:host-context(html.ion-palette-dark) .article-card--bordered,:host-context(body.dark) .article-card--bordered,:host-context([data-theme=dark]) .article-card--bordered{border-color:#ffffff1f}:host-context(.dark) .article-card--shadowed,:host-context(.ion-palette-dark) .article-card--shadowed,:host-context(html.ion-palette-dark) .article-card--shadowed,:host-context(body.dark) .article-card--shadowed,:host-context([data-theme=dark]) .article-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .article-card--clickable:hover,:host-context(.ion-palette-dark) .article-card--clickable:hover,:host-context(html.ion-palette-dark) .article-card--clickable:hover,:host-context(body.dark) .article-card--clickable:hover,:host-context([data-theme=dark]) .article-card--clickable:hover{box-shadow:0 6px 20px #0006}\n"] }]
        }], propDecorators: { onClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 