import { SafeHtml } from '@angular/platform-browser';
import * as i0 from "@angular/core";
import * as i1 from "./ripple.directive";
/**
 * Card type — selects the projected/laid-out content. Mirrors the library's `variant` pattern.
 * `basic` is the Figma "cards" section (the "Card Item" family: icon + arrow +
 * title/subtitle, sized, across the outlined/filled/gradient/image surfaces) —
 * distinct from the `content` category tiles.
 */
export type CardVariant = 'basic' | 'content' | 'action' | 'metric';
/** Visual surface treatment. Mirrors the Figma "Card Item" Style property. */
export type CardAppearance = 'outlined' | 'filled' | 'gradient' | 'image';
/** Corner radius token: `md` (12px), `lg` (16px), `xl` (24px). */
export type CardRadius = 'md' | 'lg' | 'xl';
/** Inner padding token (used by `variant="basic"`; typed variants size themselves). */
export type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
/** Action-card layout. */
export type CardOrientation = 'horizontal' | 'vertical';
/** Base Card Item size (Figma "Size" property). Drives layout + type scale. */
export type CardSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
/** Heading level for the title / hero headline / action label (screen-reader heading semantics). */
export type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;
/** How the content-variant category renders: trailing pill (`chip`) or leading plain-text `label`. */
export type CardCategoryStyle = 'chip' | 'label';
/**
 * Content-variant icon badge treatment:
 * - `primary` — white icon on a filled primary (blue) circle (default).
 * - `neutral` — dark (on-surface) icon on a white circle with a thin outline.
 */
export type CardIconStyle = 'primary' | 'neutral';
/**
 * Card — the single Cards component for the ComPsych Design System.
 *
 * Figma: Core Components — "Cards" (file VFBn7KCDy3FSIlvhNo3ylq, 1117:9829).
 *
 * One component, switched by `variant` (like Accordion's `variant`):
 * - `basic`   — a bare surface; project your own content.
 * - `content` — icon badge / image, category chip, title, subtitle, description,
 *               action pill, arrow; hero (`headline`) layout.
 * - `action`  — compact interactive row (icon · label/description · arrow); horizontal/vertical.
 * - `metric`  — centered value + label; `current` (selected) state.
 *
 * `appearance` is the orthogonal surface skin (outlined / filled / gradient / image).
 * When `interactive`, the whole card is a button (role/tabindex/keyboard) with the
 * hover / focus / pressed ripple. All values are sys design tokens.
 *
 *   <compsych-card variant="content" appearance="gradient" icon="circle-play"
 *     category="Video" title="Mindful breathing" actionLabel="Watch" [interactive]="true" />
 *   <compsych-card variant="metric" value="24" label="Sessions" [current]="true" [interactive]="true" />
 *   <compsych-card>Projected content</compsych-card>
 */
export declare class CardComponent {
    /** Card type. Defaults to `basic` (projected content). */
    readonly variant: import("@angular/core").InputSignal<CardVariant>;
    /** Surface treatment. Defaults to `outlined`. */
    readonly appearance: import("@angular/core").InputSignal<CardAppearance>;
    /** Corner radius token. Defaults to `lg` (16px). */
    readonly radius: import("@angular/core").InputSignal<CardRadius>;
    /** Inner padding for `variant="basic"`. Typed variants size themselves. */
    readonly padding: import("@angular/core").InputSignal<CardPadding>;
    /** Card Item size (`variant="basic"`): xl/lg/md/sm/xs. Defaults to `md`. */
    readonly size: import("@angular/core").InputSignal<CardSize>;
    /** Whole-card click target: adds role/tabindex, hover/press states and ripple. */
    readonly interactive: import("@angular/core").InputSignal<boolean>;
    /** Disabled visual + non-interactive. */
    readonly disabled: import("@angular/core").InputSignal<boolean>;
    /** Applies the focused (blue outline) appearance. Useful for action cards to indicate selection. */
    readonly selected: import("@angular/core").InputSignal<boolean>;
    /** Background image URL for `appearance="image"`. */
    readonly imageSrc: import("@angular/core").InputSignal<string>;
    /**
     * `background-position` for the `image` appearance media (e.g. `'85% 0'` for an
     * off-center hero). Defaults to `'center'` — unchanged from before.
     */
    readonly imagePosition: import("@angular/core").InputSignal<string>;
    /** Lucide icon name (content badge / action leading icon). */
    readonly icon: import("@angular/core").InputSignal<string>;
    /** Content: category chip text. */
    readonly category: import("@angular/core").InputSignal<string>;
    /**
     * Content: how the category renders — `'chip'` (default) as the trailing pill,
     * or `'label'` as a leading plain-text label beside the icon.
     */
    readonly categoryStyle: import("@angular/core").InputSignal<CardCategoryStyle>;
    /**
     * Content: icon badge treatment — `'primary'` (default) is a white icon on a
     * filled primary (blue) circle; `'neutral'` is a dark icon on a white circle
     * with a thin outline.
     */
    readonly iconStyle: import("@angular/core").InputSignal<CardIconStyle>;
    /** Content: title. */
    readonly title: import("@angular/core").InputSignal<string>;
    /** Content: subtitle. */
    readonly subtitle: import("@angular/core").InputSignal<string>;
    /** Content/action: supporting description. */
    readonly description: import("@angular/core").InputSignal<string>;
    /** Content: large hero display text (switches to the XL hero layout). */
    readonly headline: import("@angular/core").InputSignal<string>;
    /** Content: presentational action pill label. */
    readonly actionLabel: import("@angular/core").InputSignal<string>;
    /** Content: show the trailing arrow-up-right affordance. */
    readonly showArrow: import("@angular/core").InputSignal<boolean>;
    /** Content (gradient): show the inner gradient panel background. Set to `false` to render a flat surface. */
    readonly showGradient: import("@angular/core").InputSignal<boolean>;
    /** Content: remove the fixed min-height so the card sizes to its content. */
    readonly compact: import("@angular/core").InputSignal<boolean>;
    /** Action/metric: primary label. */
    readonly label: import("@angular/core").InputSignal<string>;
    /** Action: trailing Lucide icon (horizontal layout). */
    readonly trailingIcon: import("@angular/core").InputSignal<string>;
    /** Action: layout orientation. */
    readonly orientation: import("@angular/core").InputSignal<CardOrientation>;
    /** Action: stretch the card to 100% of its container width. */
    readonly fullWidth: import("@angular/core").InputSignal<boolean>;
    /** Metric: the prominent value. */
    readonly value: import("@angular/core").InputSignal<string | number>;
    /** Metric: selected/current state (primary border + text). */
    readonly current: import("@angular/core").InputSignal<boolean>;
    /**
     * Opts the title / hero headline / action label into a heading in the
     * accessibility tree via `role="heading"` + `aria-level`, so consumers that
     * replace real headings keep heading semantics and screen-reader heading
     * navigation (WCAG 1.3.1). Omit (default) to render as plain text — no visual
     * or behavioral change for existing usages.
     */
    readonly headingLevel: import("@angular/core").InputSignal<CardHeadingLevel | undefined>;
    /**
     * Accessible name for an `interactive` card (which is a `role="button"`).
     * Required for image-only / icon-only interactive cards that have no text, and
     * useful to give text-heavy cards a concise name instead of their full content.
     * Bind as `aria-label`.
     */
    readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
    /** Emits on click / Enter / Space when interactive and not disabled. */
    readonly cardClick: import("@angular/core").OutputEmitterRef<void>;
    private readonly sanitizer;
    private readonly ripple;
    readonly isImage: import("@angular/core").Signal<boolean>;
    /**
     * Heading level actually applied. Suppressed when the whole card is interactive
     * (`role="button"`), since a heading nested in a button isn't exposed as a
     * heading — the two would conflict.
     */
    readonly effectiveHeadingLevel: import("@angular/core").Signal<CardHeadingLevel | undefined>;
    /** Base Card Item plain-icon glyph size by `size` (48 md, 32 sm, 24 xs). */
    readonly basicIconSize: import("@angular/core").Signal<32 | 24 | 48>;
    /** Base Card Item arrow glyph size by `size` (24 md, 20 sm/xs). */
    readonly basicArrowSize: import("@angular/core").Signal<24 | 20>;
    /** CSS `url(...)` for the media layer, or null when no image is set. */
    readonly mediaUrl: import("@angular/core").Signal<string | null>;
    /** Padding resolved per variant; `basic` honors the `padding` input. */
    readonly effectivePadding: import("@angular/core").Signal<CardPadding>;
    constructor();
    onActivate(): void;
    onKeyDown(event: KeyboardEvent): void;
    /** Renders a sized/weighted Lucide SVG for template use. */
    iconSvg(name: string, size: number, strokeWidth?: number): SafeHtml;
    static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "compsych-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "imagePosition": { "alias": "imagePosition"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "category": { "alias": "category"; "required": false; "isSignal": true; }; "categoryStyle": { "alias": "categoryStyle"; "required": false; "isSignal": true; }; "iconStyle": { "alias": "iconStyle"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "headline": { "alias": "headline"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "showGradient": { "alias": "showGradient"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["*"], true, [{ directive: typeof i1.RippleDirective; inputs: {}; outputs: {}; }]>;
}