import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
import { IonSpinner } from '@ionic/angular/standalone';
import { I18nService } from '../../../services/i18n';
import { INVITATION_CARD_DEFAULTS } from './types';
import * as i0 from "@angular/core";
/**
 * val-invitation-card
 *
 * Tarjeta de invitación pendiente a una organización. Muestra el nombre de la
 * org, quién invita y el rol, con acciones aceptar / rechazar.
 *
 * Soporta i18n (namespace `InvitationCard` por defecto) y dark mode vía
 * variables Ionic basadas en `dark` (sin tonos light/medium).
 *
 * @example
 * ```html
 * <val-invitation-card
 *   [props]="{
 *     token: invite.orgId,
 *     orgName: invite.orgName,
 *     inviterName: invite.inviterName,
 *     role: invite.roleId,
 *     accepting: accepting() === invite.orgId
 *   }"
 *   (onAccept)="accept(invite)"
 *   (onDecline)="decline(invite)"
 * />
 * ```
 */
export class InvitationCardComponent {
    constructor() {
        this.i18n = inject(I18nService);
        this.props = input({});
        this.onAccept = new EventEmitter();
        this.onDecline = new EventEmitter();
        this.config = computed(() => ({
            ...INVITATION_CARD_DEFAULTS,
            ...this.props(),
        }));
        this.subtitle = computed(() => {
            const cfg = this.config();
            return [cfg.inviterName, cfg.role].filter(Boolean).join(' · ');
        });
        this.acceptLabel = computed(() => {
            const cfg = this.config();
            if (cfg.acceptLabel)
                return cfg.acceptLabel;
            this.i18n.lang();
            return this.i18n.t(cfg.acceptKey, cfg.i18nNamespace);
        });
        this.declineLabel = computed(() => {
            const cfg = this.config();
            if (cfg.declineLabel)
                return cfg.declineLabel;
            this.i18n.lang();
            return this.i18n.t(cfg.declineKey, cfg.i18nNamespace);
        });
    }
    emitAccept() {
        if (this.config().disabled)
            return;
        this.onAccept.emit({ token: this.config().token });
    }
    emitDecline() {
        if (this.config().disabled)
            return;
        this.onDecline.emit({ token: this.config().token });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InvitationCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: InvitationCardComponent, isStandalone: true, selector: "val-invitation-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAccept: "onAccept", onDecline: "onDecline" }, ngImport: i0, template: `
    <div class="invitation-card">
      <div class="invitation-card__body">
        <span class="invitation-card__name">{{ config().orgName }}</span>
        @if (subtitle()) {
          <span class="invitation-card__subtitle">{{ subtitle() }}</span>
        }
      </div>
      <div class="invitation-card__actions">
        @if (config().accepting) {
          <ion-spinner name="crescent" class="invitation-card__spinner" />
        } @else {
          <button
            type="button"
            class="invitation-card__action invitation-card__action--accept"
            [disabled]="config().disabled"
            (click)="emitAccept()"
          >
            {{ acceptLabel() }}
          </button>
          <button
            type="button"
            class="invitation-card__action invitation-card__action--decline"
            [disabled]="config().disabled"
            (click)="emitDecline()"
          >
            {{ declineLabel() }}
          </button>
        }
      </div>
    </div>
  `, isInline: true, styles: [":host{display:block}.invitation-card{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--ion-card-background, var(--ion-background-color));border:1px solid rgba(var(--ion-color-dark-rgb),.14);border-radius:12px}.invitation-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.invitation-card__name{font-weight:600;font-size:.95rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.invitation-card__subtitle{font-size:.82rem;color:rgba(var(--ion-color-dark-rgb),.7)}.invitation-card__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.invitation-card__spinner{width:20px;height:20px;color:var(--ion-color-dark)}.invitation-card__action{border:1.5px solid transparent;background:none;cursor:pointer;font-size:.82rem;font-weight:600;padding:6px 14px;border-radius:20px;white-space:nowrap;transition:opacity .15s ease}.invitation-card__action:active{opacity:.7}.invitation-card__action:disabled{opacity:.4;cursor:default}.invitation-card__action--accept{background:var(--ion-color-dark);border-color:var(--ion-color-dark);color:var(--ion-color-dark-contrast)}.invitation-card__action--decline{background:transparent;border-color:rgba(var(--ion-color-dark-rgb),.35);color:var(--ion-color-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InvitationCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-invitation-card', standalone: true, imports: [CommonModule, IonSpinner], template: `
    <div class="invitation-card">
      <div class="invitation-card__body">
        <span class="invitation-card__name">{{ config().orgName }}</span>
        @if (subtitle()) {
          <span class="invitation-card__subtitle">{{ subtitle() }}</span>
        }
      </div>
      <div class="invitation-card__actions">
        @if (config().accepting) {
          <ion-spinner name="crescent" class="invitation-card__spinner" />
        } @else {
          <button
            type="button"
            class="invitation-card__action invitation-card__action--accept"
            [disabled]="config().disabled"
            (click)="emitAccept()"
          >
            {{ acceptLabel() }}
          </button>
          <button
            type="button"
            class="invitation-card__action invitation-card__action--decline"
            [disabled]="config().disabled"
            (click)="emitDecline()"
          >
            {{ declineLabel() }}
          </button>
        }
      </div>
    </div>
  `, styles: [":host{display:block}.invitation-card{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--ion-card-background, var(--ion-background-color));border:1px solid rgba(var(--ion-color-dark-rgb),.14);border-radius:12px}.invitation-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.invitation-card__name{font-weight:600;font-size:.95rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.invitation-card__subtitle{font-size:.82rem;color:rgba(var(--ion-color-dark-rgb),.7)}.invitation-card__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.invitation-card__spinner{width:20px;height:20px;color:var(--ion-color-dark)}.invitation-card__action{border:1.5px solid transparent;background:none;cursor:pointer;font-size:.82rem;font-weight:600;padding:6px 14px;border-radius:20px;white-space:nowrap;transition:opacity .15s ease}.invitation-card__action:active{opacity:.7}.invitation-card__action:disabled{opacity:.4;cursor:default}.invitation-card__action--accept{background:var(--ion-color-dark);border-color:var(--ion-color-dark);color:var(--ion-color-dark-contrast)}.invitation-card__action--decline{background:transparent;border-color:rgba(var(--ion-color-dark-rgb),.35);color:var(--ion-color-dark)}\n"] }]
        }], propDecorators: { onAccept: [{
                type: Output
            }], onDecline: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 