import { ChangeDetectorRef, ElementRef, EventEmitter, OnInit, Renderer2 } from '@angular/core'; import * as i0 from "@angular/core"; /** * Surface container that groups related content into a single scannable unit. * * A card is composed, not configured: project the parts you need, in the order * you need them. Every part is optional, so a bare `riv-card` is a valid * surface on its own. * * - `riv-card-media` — leading image or video * - `riv-card-header` — heading, subheading, leading adornment, actions * - `riv-card-content` — body * - `riv-card-actions` — trailing control row * * ```html * * * ... * * * Last edit: {{ workbook.modified | rivDate }} * * * ``` * * ## Making the card activate * * Set `clickable` and handle `cardClick` to make the whole surface act on a * click: * * ```html * * ``` * * The card renders its own full-surface button for this, so activation works * with a pointer, with Enter, and with Space, and the focus ring traces the * whole card. Controls in `riv-card-header`'s `[actions]` slot and in * `riv-card-actions` sit above it and stay independently clickable — a menu * inside a clickable card needs no `stopPropagation`. Other interactive content * projected into the card must raise itself with `position: relative` and * `z-index: var(--card-raised-z-index)`. * * When the card's action is really a navigation, prefer `[riv-card-link]` on an * `` instead: that keeps the URL, middle-click, and "open in new tab". * * ## Selection * * Set `selected` to mark the card the user is currently looking at. It gives * the surface a distinct border and shadow, and announces through * `aria-current` so the state is not conveyed by colour alone. * * ```html * * ``` * * Selection is separate from `tone`, so it composes with any tint — a selected * `danger` card keeps its danger background. * * ## Making the card expand and collapse * * Set `expandable` on `riv-card-header` and render the body only while it is * open. The header owns the toggle affordance and its accessibility; the * consumer owns the state: * * ```html * * * ... * * ``` * * The card relays the region id from the header to the content, so the toggle's * `aria-controls` names the body with no ids wired by hand. * * Do not combine `expandable` with `clickable`: both claim the same click, and * a card that opens as well as expands leaves the user no way to tell which one * they are about to get. * * ## Notes * * When projecting raw content with no sub-components, set `padding` so the * content is not flush against the border. * * The card clips its own content so media and filled header/action rows follow * its corners. Popups (`riv-menu`, `rivTooltip`) render through the overlay * outlet, so they are not affected by that clipping. * * Per-instance radius can be overridden with the `--card-border-radius` * custom property. */ export declare class CardComponent implements OnInit { private readonly el; private readonly renderer; private readonly cdr; constructor(el: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef); /** Border and shadow treatment of the surface. */ variant: CardComponent.Variant; /** Neutral background elevation, matching the `--surface-light-*` tokens. */ surface: CardComponent.Surface; /** Semantic background tint. Overrides `surface` when not `neutral`. */ tone: CardComponent.Tone; /** Stacking direction of the projected parts. */ orientation: CardComponent.Orientation; /** * Padding applied to the card itself. Leave as `none` when composing with * `riv-card-header` / `riv-card-content` / `riv-card-actions`, which own * their own padding. */ padding: CardComponent.Padding; /** * Makes the whole surface activate, emitting `cardClick`. Adds the hover * affordance and keyboard support. */ clickable: boolean; /** * Accessible name for the card's action. Defaults to the `riv-card-header` * title, falling back to the card's whole text content when there is no * header. Set this when neither reads well on its own. */ clickLabel?: string; /** * Marks the card as the current selection, giving it a distinct border and * shadow. Composes with any `tone`, so a selected danger card keeps its * tint. Announced to assistive technology through `aria-current`. */ selected: boolean; /** * Mutes the surface, suppresses hover feedback, and disables the click * target. Presentational for everything else — disable the card's own * controls too. */ disabled: boolean; /** Emitted when a clickable card is activated by pointer or keyboard. */ cardClick: EventEmitter; /** * Names the click target from the card's content. Generated only when the * consumer has not set their own id. */ private cardId; /** Set by a projected `riv-card-header` that has a title to name against. */ private titleId?; /** Set by a projected `riv-card-header` that is expandable. */ private expandRegionId?; /** * Id an expandable header's toggle points `aria-controls` at, worn by a * projected `riv-card-content`. */ get regionId(): string | undefined; ngOnInit(): void; /** * Registers the header's title as the click target's accessible name, which * keeps the announcement to the card's subject instead of every word on the * surface. Called by `riv-card-header`; not part of the public API. */ setTitleId(id: string | undefined): void; /** * Gives up a title registered by `setTitleId`, so a header that is removed * does not leave the click target naming itself against a detached element. * Ignores ids that are no longer the one in use. */ clearTitleId(id: string): void; /** * Relays the region an expandable header controls to the projected * `riv-card-content`, so neither side needs the consumer to wire an id. * Called by `riv-card-header`; not part of the public API. */ setRegionId(id: string | undefined): void; /** * Gives up a region registered by `setRegionId`. Ignores ids that are no * longer the one in use. */ clearRegionId(id: string): void; /** * Element whose text names the click target, unless `clickLabel` is set. The * host id is read from the DOM rather than cached, so a bound `[id]` that * changes is picked up on the card's next change detection. */ protected get labelledBy(): string | null; /** Announces the current selection to assistive technology. */ get ariaCurrent(): string | null; get classes(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } export declare namespace CardComponent { const Variants: readonly ["outlined", "elevated", "flat", "dashed"]; type Variant = (typeof Variants)[number]; const Surfaces: readonly ["0", "1", "2"]; type Surface = (typeof Surfaces)[number]; const Tones: readonly ["neutral", "danger", "caution", "warning", "safety", "selected"]; type Tone = (typeof Tones)[number]; const Orientations: readonly ["vertical", "horizontal"]; type Orientation = (typeof Orientations)[number]; /** Shared padding scale for the card and its sub-components. */ const Paddings: readonly ["none", "small", "medium", "large"]; type Padding = (typeof Paddings)[number]; }