import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IonIcon } from '@ionic/angular/standalone';
import { NavigationService } from '../../../services/navigation';
import { MEDIA_OBJECT_DEFAULTS } from './types';
import * as i0 from "@angular/core";
const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
/**
 * val-media-object
 *
 * Image (or icon) on one side, title + long body text on the other. Useful for
 * feature rows, informational blocks, "what is X" sections, etc.
 *
 * Presentational: pass already-resolved strings (build them with
 * `I18nService.t()` in the consumer page).
 *
 * @example
 * ```html
 * <val-media-object
 *   [props]="{
 *     image: '/assets/feature.png',
 *     overtitle: 'Privacy',
 *     title: 'Your data stays yours',
 *     body: 'A long explanation that can span several lines without truncation.',
 *     link: { label: 'Learn more', routerLink: '/privacy' }
 *   }"
 * />
 * ```
 */
export class MediaObjectComponent {
    constructor() {
        this.navigation = inject(NavigationService);
        /** Component configuration */
        this.props = input({});
        /** Emitted when the inline link is clicked */
        this.onLinkClick = new EventEmitter();
        /** Merged configuration with defaults */
        this.config = computed(() => ({
            ...MEDIA_OBJECT_DEFAULTS,
            ...this.props(),
        }));
    }
    getColor() {
        const color = this.config().color;
        if (!color)
            return 'var(--ion-color-primary)';
        return IONIC_COLORS.includes(color) ? `var(--ion-color-${color})` : color;
    }
    handleLinkClick(event) {
        const link = this.config().link;
        this.onLinkClick.emit(this.config().token);
        if (link?.href) {
            event.preventDefault();
            this.navigation.openInNewTab(link.href);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MediaObjectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MediaObjectComponent, isStandalone: true, selector: "val-media-object", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onLinkClick: "onLinkClick" }, ngImport: i0, template: `
    <div
      class="media-object"
      [class.media-object--reversed]="config().reversed"
      [class.media-object--center]="config().align === 'center'"
    >
      <!-- Media (image or icon) -->
      <div
        class="media-object__media"
        [class.media-object__media--rounded]="config().rounded && !config().circle"
        [class.media-object__media--circle]="config().circle"
        [style.width]="config().mediaWidth"
        [style.--media-color]="getColor()"
      >
        @if (config().image) {
          <img [src]="config().image" [alt]="config().imageAlt || config().title" />
        } @else if (config().icon) {
          <ion-icon [name]="config().icon!"></ion-icon>
        }
      </div>

      <!-- Content -->
      <div class="media-object__content">
        @if (config().overtitle) {
          <span class="media-object__overtitle">{{ config().overtitle }}</span>
        }
        <h3 class="media-object__title">{{ config().title }}</h3>
        @if (config().body) {
          <p class="media-object__body">{{ config().body }}</p>
        }
        @if (config().link; as link) {
          <a class="media-object__link" [routerLink]="link.routerLink ?? null" (click)="handleLinkClick($event)">
            {{ link.label }}
          </a>
        }
      </div>
    </div>
  `, isInline: true, styles: [":host{display:block}.media-object{display:flex;align-items:flex-start;gap:1.25rem}.media-object--center{align-items:center}.media-object--reversed{flex-direction:row-reverse}.media-object__media{flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--media-color, var(--ion-color-primary))}.media-object__media img{width:100%;height:100%;object-fit:cover;display:block}.media-object__media ion-icon{font-size:2.5rem}.media-object__media--rounded{border-radius:12px}.media-object__media--circle{aspect-ratio:1;border-radius:50%}.media-object__content{flex:1;min-width:0}.media-object__overtitle{display:block;margin-bottom:.25rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium)}.media-object__title{margin:0 0 .5rem;font-size:1.15rem;font-weight:700;line-height:1.3;color:var(--ion-text-color)}.media-object__body{margin:0;font-size:.95rem;line-height:1.6;color:var(--ion-color-medium-shade)}.media-object__link{display:inline-block;margin-top:.75rem;font-size:.9rem;font-weight:600;color:var(--ion-color-primary);text-decoration:none;cursor:pointer}.media-object__link:hover{text-decoration:underline}@media (max-width: 576px){.media-object{gap:1rem}}\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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MediaObjectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-media-object', standalone: true, imports: [CommonModule, RouterLink, IonIcon], template: `
    <div
      class="media-object"
      [class.media-object--reversed]="config().reversed"
      [class.media-object--center]="config().align === 'center'"
    >
      <!-- Media (image or icon) -->
      <div
        class="media-object__media"
        [class.media-object__media--rounded]="config().rounded && !config().circle"
        [class.media-object__media--circle]="config().circle"
        [style.width]="config().mediaWidth"
        [style.--media-color]="getColor()"
      >
        @if (config().image) {
          <img [src]="config().image" [alt]="config().imageAlt || config().title" />
        } @else if (config().icon) {
          <ion-icon [name]="config().icon!"></ion-icon>
        }
      </div>

      <!-- Content -->
      <div class="media-object__content">
        @if (config().overtitle) {
          <span class="media-object__overtitle">{{ config().overtitle }}</span>
        }
        <h3 class="media-object__title">{{ config().title }}</h3>
        @if (config().body) {
          <p class="media-object__body">{{ config().body }}</p>
        }
        @if (config().link; as link) {
          <a class="media-object__link" [routerLink]="link.routerLink ?? null" (click)="handleLinkClick($event)">
            {{ link.label }}
          </a>
        }
      </div>
    </div>
  `, styles: [":host{display:block}.media-object{display:flex;align-items:flex-start;gap:1.25rem}.media-object--center{align-items:center}.media-object--reversed{flex-direction:row-reverse}.media-object__media{flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--media-color, var(--ion-color-primary))}.media-object__media img{width:100%;height:100%;object-fit:cover;display:block}.media-object__media ion-icon{font-size:2.5rem}.media-object__media--rounded{border-radius:12px}.media-object__media--circle{aspect-ratio:1;border-radius:50%}.media-object__content{flex:1;min-width:0}.media-object__overtitle{display:block;margin-bottom:.25rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--ion-color-medium)}.media-object__title{margin:0 0 .5rem;font-size:1.15rem;font-weight:700;line-height:1.3;color:var(--ion-text-color)}.media-object__body{margin:0;font-size:.95rem;line-height:1.6;color:var(--ion-color-medium-shade)}.media-object__link{display:inline-block;margin-top:.75rem;font-size:.9rem;font-weight:600;color:var(--ion-color-primary);text-decoration:none;cursor:pointer}.media-object__link:hover{text-decoration:underline}@media (max-width: 576px){.media-object{gap:1rem}}\n"] }]
        }], propDecorators: { onLinkClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 