import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, input, Output } from '@angular/core';
import { ButtonGroupComponent } from '../button-group/button-group.component';
import { CTA_CARD_DEFAULTS } from './types';
import * as i0 from "@angular/core";
const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
/**
 * val-cta-card
 *
 * Card with a title, optional description and a group of action buttons, with
 * customisable padding, corner rounding and background (Ionic colors
 * supported). Buttons reuse `val-button-group`.
 *
 * Presentational — pass already-resolved strings.
 *
 * @example
 * ```html
 * <val-cta-card
 *   [props]="{
 *     title: 'Read the Bible Online',
 *     description: 'Trusted translations, in your language.',
 *     actions: {
 *       position: 'left',
 *       columned: false,
 *       buttons: [
 *         { text: 'Continue Reading', color: 'dark', type: 'button', shape: 'round', state: 'ENABLED', token: 'read' },
 *         { text: 'Listen', color: 'dark', fill: 'outline', type: 'button', shape: 'round', state: 'ENABLED', token: 'listen' }
 *       ]
 *     }
 *   }"
 *   (onAction)="onAction($event)"
 * />
 * ```
 */
export class CtaCardComponent {
    constructor() {
        /** Component configuration */
        this.props = input({});
        /** Emitted with the token of the clicked action button */
        this.onAction = new EventEmitter();
        /** Merged configuration with defaults */
        this.config = computed(() => ({
            ...CTA_CARD_DEFAULTS,
            ...this.props(),
        }));
    }
    resolveColor(color) {
        if (!color)
            return null;
        return IONIC_COLORS.includes(color) ? `var(--ion-color-${color})` : color;
    }
    getBackground() {
        return this.resolveColor(this.config().backgroundColor) || 'var(--ion-color-light, #f4f5f8)';
    }
    getColor() {
        return this.resolveColor(this.config().color);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CtaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CtaCardComponent, isStandalone: true, selector: "val-cta-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: `
    <section
      class="cta-card"
      [class.cta-card--center]="config().align === 'center'"
      [class.cta-card--bordered]="config().bordered"
      [class.cta-card--shadowed]="config().shadowed"
      [style.padding]="config().padding"
      [style.border-radius]="config().borderRadius"
      [style.background]="getBackground()"
      [style.color]="getColor()"
    >
      @if (config().overtitle) {
        <span class="cta-card__overtitle">{{ config().overtitle }}</span>
      }

      <h2 class="cta-card__title">{{ config().title }}</h2>

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

      @if (config().actions; as actions) {
        <div class="cta-card__actions">
          <val-button-group [props]="actions" (onClick)="onAction.emit($event)"></val-button-group>
        </div>
      }
    </section>
  `, isInline: true, styles: [":host{display:block}.cta-card{display:flex;flex-direction:column;gap:.5rem}.cta-card--center{align-items:center;text-align:center}.cta-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.cta-card--shadowed{box-shadow:0 4px 16px #00000014}.cta-card__overtitle{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;opacity:.7}.cta-card__title{margin:0;font-size:1.75rem;font-weight:800;line-height:1.2;letter-spacing:-.02em}.cta-card__description{margin:0;font-size:1rem;line-height:1.5;opacity:.8}.cta-card__actions{margin-top:1rem;width:100%}@media (max-width: 576px){.cta-card__title{font-size:1.4rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CtaCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-cta-card', standalone: true, imports: [CommonModule, ButtonGroupComponent], template: `
    <section
      class="cta-card"
      [class.cta-card--center]="config().align === 'center'"
      [class.cta-card--bordered]="config().bordered"
      [class.cta-card--shadowed]="config().shadowed"
      [style.padding]="config().padding"
      [style.border-radius]="config().borderRadius"
      [style.background]="getBackground()"
      [style.color]="getColor()"
    >
      @if (config().overtitle) {
        <span class="cta-card__overtitle">{{ config().overtitle }}</span>
      }

      <h2 class="cta-card__title">{{ config().title }}</h2>

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

      @if (config().actions; as actions) {
        <div class="cta-card__actions">
          <val-button-group [props]="actions" (onClick)="onAction.emit($event)"></val-button-group>
        </div>
      }
    </section>
  `, styles: [":host{display:block}.cta-card{display:flex;flex-direction:column;gap:.5rem}.cta-card--center{align-items:center;text-align:center}.cta-card--bordered{border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .1))}.cta-card--shadowed{box-shadow:0 4px 16px #00000014}.cta-card__overtitle{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;opacity:.7}.cta-card__title{margin:0;font-size:1.75rem;font-weight:800;line-height:1.2;letter-spacing:-.02em}.cta-card__description{margin:0;font-size:1rem;line-height:1.5;opacity:.8}.cta-card__actions{margin-top:1rem;width:100%}@media (max-width: 576px){.cta-card__title{font-size:1.4rem}}\n"] }]
        }], propDecorators: { onAction: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 