import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IonIcon, IonRippleEffect } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { chevronForwardOutline } from 'ionicons/icons';
import { I18nService } from '../../../services/i18n';
import { NavigationService } from '../../../services/navigation';
import { ACTION_CARD_DEFAULTS } from './types';
import * as i0 from "@angular/core";
addIcons({ chevronForwardOutline });
const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
/**
 * val-action-card
 *
 * A clickable card component with icon, title, description, and optional badge.
 * Supports multiple icon formats: Ionicons, SVG paths, and image URLs.
 *
 * @example Basic usage with Ionicon
 * ```html
 * <val-action-card
 *   [props]="{
 *     icon: { ionicon: 'settings-outline' },
 *     title: 'Settings',
 *     description: 'Manage your preferences'
 *   }"
 *   (onClick)="onCardClick($event)"
 * />
 * ```
 *
 * @example With routerLink navigation
 * ```html
 * <val-action-card
 *   [props]="{
 *     icon: { ionicon: 'person-outline', color: 'primary' },
 *     title: 'Profile',
 *     description: 'View and edit your profile',
 *     routerLink: '/settings/profile',
 *     showChevron: true
 *   }"
 * />
 * ```
 *
 * @example With custom SVG icon
 * ```html
 * <val-action-card
 *   [props]="{
 *     icon: { svgPath: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' },
 *     title: 'Custom Feature',
 *     description: 'A feature with custom SVG icon',
 *     badge: { text: 'NEW', color: 'light', backgroundColor: 'primary' }
 *   }"
 * />
 * ```
 */
export class ActionCardComponent {
    constructor() {
        this.i18n = inject(I18nService);
        this.navigation = inject(NavigationService);
        /** Component configuration */
        this.props = input({});
        /** Event emitted when card is clicked */
        this.onClick = new EventEmitter();
        /** Merged configuration with defaults */
        this.config = computed(() => ({
            ...ACTION_CARD_DEFAULTS,
            ...this.props(),
        }));
    }
    /** Get title with i18n support */
    getTitle() {
        const cfg = this.config();
        if (cfg.i18nNamespace && cfg.titleKey) {
            this.i18n.lang(); // Track language changes for reactivity
            return this.i18n.t(cfg.titleKey, cfg.i18nNamespace);
        }
        return cfg.title || '';
    }
    /** Get description with i18n support */
    getDescription() {
        const cfg = this.config();
        if (cfg.i18nNamespace && cfg.descriptionKey) {
            this.i18n.lang(); // Track language changes for reactivity
            return this.i18n.t(cfg.descriptionKey, cfg.i18nNamespace);
        }
        return cfg.description || '';
    }
    /** Resolve color to CSS value */
    resolveColor(color) {
        if (!color)
            return null;
        if (IONIC_COLORS.includes(color)) {
            return `var(--ion-color-${color})`;
        }
        return color;
    }
    getBackgroundColor() {
        return this.resolveColor(this.config().backgroundColor);
    }
    getBorderColor() {
        return this.resolveColor(this.config().borderColor) || 'var(--ion-color-light-shade)';
    }
    getIconColor() {
        return this.resolveColor(this.config().icon?.color) || 'var(--ion-color-primary)';
    }
    getIconBackgroundColor() {
        const bg = this.config().icon?.backgroundColor;
        if (!bg)
            return 'rgba(var(--ion-color-primary-rgb), 0.1)';
        return this.resolveColor(bg);
    }
    getBadgeColor() {
        return this.resolveColor(this.config().badge?.color) || 'white';
    }
    getBadgeBackgroundColor() {
        return this.resolveColor(this.config().badge?.backgroundColor) || 'var(--ion-color-primary)';
    }
    /** Handle card click */
    handleClick(event) {
        const cfg = this.config();
        if (cfg.disabled) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        // Emit click event
        this.onClick.emit({
            token: cfg.token,
            navigated: !!cfg.routerLink || !!cfg.href,
        });
        // Handle external URL
        if (cfg.href) {
            this.navigation.openInNewTab(cfg.href);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ActionCardComponent, isStandalone: true, selector: "val-action-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
    <article
      class="action-card"
      [class.action-card--small]="config().size === 'small'"
      [class.action-card--medium]="config().size === 'medium'"
      [class.action-card--large]="config().size === 'large'"
      [class.action-card--bordered]="config().bordered"
      [class.action-card--shadowed]="config().shadowed"
      [class.action-card--disabled]="config().disabled"
      [class.action-card--clickable]="!config().disabled"
      [style.--card-bg]="getBackgroundColor()"
      [style.--card-border-color]="getBorderColor()"
      [routerLink]="config().disabled ? null : config().routerLink"
      (click)="handleClick($event)"
      [attr.tabindex]="config().disabled ? -1 : 0"
      [attr.role]="'button'"
      [attr.aria-disabled]="config().disabled"
    >
      <ion-ripple-effect></ion-ripple-effect>

      <!-- Badge (top-right corner) -->
      @if (config().badge) {
        <span
          class="action-card__badge"
          [style.color]="getBadgeColor()"
          [style.background-color]="getBadgeBackgroundColor()"
        >
          {{ config().badge!.text }}
        </span>
      }

      <!-- Icon Container -->
      <div class="action-card__icon" [style.color]="getIconColor()" [style.background-color]="getIconBackgroundColor()">
        @if (config().icon?.ionicon) {
          <ion-icon [name]="config().icon!.ionicon!"></ion-icon>
        } @else if (config().icon?.svgPath) {
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path [attr.d]="config().icon!.svgPath" />
          </svg>
        } @else if (config().icon?.imageUrl) {
          <img [src]="config().icon!.imageUrl" [alt]="getTitle()" class="action-card__icon-image" />
        }
      </div>

      <!-- Content -->
      <div class="action-card__content">
        <h3 class="action-card__title">{{ getTitle() }}</h3>
        @if (getDescription()) {
          <p class="action-card__description">{{ getDescription() }}</p>
        }
      </div>

      <!-- Chevron (optional) -->
      @if (config().showChevron && !config().disabled) {
        <ion-icon name="chevron-forward-outline" class="action-card__chevron"></ion-icon>
      }
    </article>
  `, isInline: true, styles: [":host{display:flex;flex-direction:column}.action-card{position:relative;display:flex;align-items:center;flex:1;gap:1rem;padding:1rem;background:var(--card-bg, var(--ion-card-background, var(--ion-background-color)));border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--ion-color-primary)}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:1.125rem;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:1.5rem;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:1.75rem;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--bordered{border:1px solid var(--card-border-color, var(--ion-color-light-shade))}.action-card--shadowed{box-shadow:0 2px 8px #00000014}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.action-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--ion-text-color);line-height:1.3}.action-card__description{margin:0;color:var(--ion-color-medium);line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--ion-color-medium);transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}:host-context(.dark) .action-card--shadowed,:host-context(.ion-palette-dark) .action-card--shadowed,:host-context(html.ion-palette-dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .action-card--clickable:hover,:host-context(.ion-palette-dark) .action-card--clickable:hover,:host-context(html.ion-palette-dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:0 4px 16px #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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-action-card', standalone: true, imports: [CommonModule, RouterLink, IonIcon, IonRippleEffect], template: `
    <article
      class="action-card"
      [class.action-card--small]="config().size === 'small'"
      [class.action-card--medium]="config().size === 'medium'"
      [class.action-card--large]="config().size === 'large'"
      [class.action-card--bordered]="config().bordered"
      [class.action-card--shadowed]="config().shadowed"
      [class.action-card--disabled]="config().disabled"
      [class.action-card--clickable]="!config().disabled"
      [style.--card-bg]="getBackgroundColor()"
      [style.--card-border-color]="getBorderColor()"
      [routerLink]="config().disabled ? null : config().routerLink"
      (click)="handleClick($event)"
      [attr.tabindex]="config().disabled ? -1 : 0"
      [attr.role]="'button'"
      [attr.aria-disabled]="config().disabled"
    >
      <ion-ripple-effect></ion-ripple-effect>

      <!-- Badge (top-right corner) -->
      @if (config().badge) {
        <span
          class="action-card__badge"
          [style.color]="getBadgeColor()"
          [style.background-color]="getBadgeBackgroundColor()"
        >
          {{ config().badge!.text }}
        </span>
      }

      <!-- Icon Container -->
      <div class="action-card__icon" [style.color]="getIconColor()" [style.background-color]="getIconBackgroundColor()">
        @if (config().icon?.ionicon) {
          <ion-icon [name]="config().icon!.ionicon!"></ion-icon>
        } @else if (config().icon?.svgPath) {
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path [attr.d]="config().icon!.svgPath" />
          </svg>
        } @else if (config().icon?.imageUrl) {
          <img [src]="config().icon!.imageUrl" [alt]="getTitle()" class="action-card__icon-image" />
        }
      </div>

      <!-- Content -->
      <div class="action-card__content">
        <h3 class="action-card__title">{{ getTitle() }}</h3>
        @if (getDescription()) {
          <p class="action-card__description">{{ getDescription() }}</p>
        }
      </div>

      <!-- Chevron (optional) -->
      @if (config().showChevron && !config().disabled) {
        <ion-icon name="chevron-forward-outline" class="action-card__chevron"></ion-icon>
      }
    </article>
  `, styles: [":host{display:flex;flex-direction:column}.action-card{position:relative;display:flex;align-items:center;flex:1;gap:1rem;padding:1rem;background:var(--card-bg, var(--ion-card-background, var(--ion-background-color)));border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;text-decoration:none;overflow:hidden;--ripple-color: var(--ion-color-primary)}.action-card--small{padding:.75rem;gap:.75rem}.action-card--small .action-card__icon{width:36px;height:36px;font-size:1.125rem;border-radius:8px}.action-card--small .action-card__icon svg{width:18px;height:18px}.action-card--small .action-card__title{font-size:.9rem}.action-card--small .action-card__description{font-size:.8rem}.action-card--medium{padding:1rem;gap:1rem}.action-card--medium .action-card__icon{width:48px;height:48px;font-size:1.5rem;border-radius:10px}.action-card--medium .action-card__icon svg{width:24px;height:24px}.action-card--medium .action-card__title{font-size:1rem}.action-card--medium .action-card__description{font-size:.875rem}.action-card--large{padding:1.25rem;gap:1.25rem}.action-card--large .action-card__icon{width:56px;height:56px;font-size:1.75rem;border-radius:12px}.action-card--large .action-card__icon svg{width:28px;height:28px}.action-card--large .action-card__title{font-size:1.1rem}.action-card--large .action-card__description{font-size:.9rem}.action-card--bordered{border:1px solid var(--card-border-color, var(--ion-color-light-shade))}.action-card--shadowed{box-shadow:0 2px 8px #00000014}.action-card--clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px #0000001f}.action-card--clickable:focus-visible{outline:2px solid var(--ion-color-primary);outline-offset:2px}.action-card--clickable:active{transform:translateY(0)}.action-card--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.action-card__badge{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:10px;z-index:1}.action-card__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.action-card__icon ion-icon{font-size:inherit}.action-card__icon svg{display:block}.action-card__icon-image{width:100%;height:100%;object-fit:cover;border-radius:8px}.action-card__content{flex:1;min-width:0}.action-card__title{margin:0 0 .25rem;font-weight:600;color:var(--ion-text-color);line-height:1.3}.action-card__description{margin:0;color:var(--ion-color-medium);line-height:1.4}.action-card__chevron{flex-shrink:0;font-size:1.25rem;color:var(--ion-color-medium);transition:transform .2s ease}.action-card--clickable:hover .action-card__chevron{transform:translate(4px)}:host-context(.dark) .action-card--shadowed,:host-context(.ion-palette-dark) .action-card--shadowed,:host-context(html.ion-palette-dark) .action-card--shadowed,:host-context(body.dark) .action-card--shadowed,:host-context([data-theme=dark]) .action-card--shadowed{box-shadow:0 2px 8px #0000004d}:host-context(.dark) .action-card--clickable:hover,:host-context(.ion-palette-dark) .action-card--clickable:hover,:host-context(html.ion-palette-dark) .action-card--clickable:hover,:host-context(body.dark) .action-card--clickable:hover,:host-context([data-theme=dark]) .action-card--clickable:hover{box-shadow:0 4px 16px #0006}\n"] }]
        }], propDecorators: { onClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 