import { Component, computed, EventEmitter, input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonIcon } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { eyeOutline } from 'ionicons/icons';
import { UserAvatarComponent } from '../../atoms/user-avatar/user-avatar.component';
import { MEMBER_CARD_DEFAULTS } from './types';
import * as i0 from "@angular/core";
export class MemberCardComponent {
    constructor() {
        this.props = input({});
        /** Emitted when the trailing action button is clicked. */
        this.onAction = new EventEmitter();
        this.config = computed(() => ({
            ...MEMBER_CARD_DEFAULTS,
            ...this.props(),
        }));
        this.displayName = computed(() => {
            const c = this.config();
            return c.name || c.handle || c.email || '—';
        });
        this.subtitle = computed(() => {
            const c = this.config();
            if (c.handle)
                return '@' + c.handle;
            return c.email ?? '';
        });
        addIcons({ eyeOutline });
    }
    emitAction() {
        this.onAction.emit(this.config().id);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MemberCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MemberCardComponent, isStandalone: true, selector: "val-member-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: `
    <div class="member-card">
      <val-user-avatar
        [props]="{
          name: config().name,
          avatarUrl: config().avatarUrl,
          email: config().email,
          size: 'medium',
        }"
      />
      <div class="member-card__body">
        <span class="member-card__name">{{ displayName() }}</span>
        @if (subtitle()) {
          <span class="member-card__sub">{{ subtitle() }}</span>
        }
        @if (config().roleLabel) {
          <span class="member-card__role">{{ config().roleLabel }}</span>
        }
      </div>
      @if (config().showAction) {
        <button
          type="button"
          class="member-card__action"
          [attr.aria-label]="config().actionAriaLabel"
          (click)="emitAction()"
        >
          <ion-icon [name]="config().actionIcon" />
        </button>
      }
    </div>
  `, isInline: true, styles: [":host{display:block}.member-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--ion-color-light, #f4f5f8)}:host-context(body.dark) .member-card,:host-context(html.ion-palette-dark) .member-card,:host-context([data-theme=dark]) .member-card{background:#ffffff0d}.member-card__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.member-card__name{font-weight:600;font-size:.9rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__sub{font-size:.78rem;color:rgba(var(--ion-color-dark-rgb),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__role{margin-top:4px;align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:20px;background:color-mix(in srgb,var(--ion-color-primary) 12%,transparent);color:var(--ion-color-primary)}.member-card__action{border:none;background:none;cursor:pointer;font-size:1.35rem;line-height:1;color:var(--ion-color-dark);padding:6px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.member-card__action:hover{background:rgba(var(--ion-color-dark-rgb),.08)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: UserAvatarComponent, selector: "val-user-avatar", inputs: ["props"], outputs: ["onClick"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MemberCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-member-card', standalone: true, imports: [CommonModule, IonIcon, UserAvatarComponent], template: `
    <div class="member-card">
      <val-user-avatar
        [props]="{
          name: config().name,
          avatarUrl: config().avatarUrl,
          email: config().email,
          size: 'medium',
        }"
      />
      <div class="member-card__body">
        <span class="member-card__name">{{ displayName() }}</span>
        @if (subtitle()) {
          <span class="member-card__sub">{{ subtitle() }}</span>
        }
        @if (config().roleLabel) {
          <span class="member-card__role">{{ config().roleLabel }}</span>
        }
      </div>
      @if (config().showAction) {
        <button
          type="button"
          class="member-card__action"
          [attr.aria-label]="config().actionAriaLabel"
          (click)="emitAction()"
        >
          <ion-icon [name]="config().actionIcon" />
        </button>
      }
    </div>
  `, styles: [":host{display:block}.member-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--ion-color-light, #f4f5f8)}:host-context(body.dark) .member-card,:host-context(html.ion-palette-dark) .member-card,:host-context([data-theme=dark]) .member-card{background:#ffffff0d}.member-card__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.member-card__name{font-weight:600;font-size:.9rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__sub{font-size:.78rem;color:rgba(var(--ion-color-dark-rgb),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__role{margin-top:4px;align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:20px;background:color-mix(in srgb,var(--ion-color-primary) 12%,transparent);color:var(--ion-color-primary)}.member-card__action{border:none;background:none;cursor:pointer;font-size:1.35rem;line-height:1;color:var(--ion-color-dark);padding:6px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.member-card__action:hover{background:rgba(var(--ion-color-dark-rgb),.08)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { onAction: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 