{"version":3,"file":"ngx-com-components-card.mjs","sources":["../../../projects/com/components/card/card.variants.ts","../../../projects/com/components/card/card.component.ts","../../../projects/com/components/card/card-header.directive.ts","../../../projects/com/components/card/card-title.directive.ts","../../../projects/com/components/card/card-subtitle.directive.ts","../../../projects/com/components/card/card-content.directive.ts","../../../projects/com/components/card/card-footer.directive.ts","../../../projects/com/components/card/card-actions.directive.ts","../../../projects/com/components/card/card-media.directive.ts","../../../projects/com/components/card/card-divider.directive.ts","../../../projects/com/components/card/card-accent.directive.ts","../../../projects/com/components/card/card-badge.directive.ts","../../../projects/com/components/card/index.ts","../../../projects/com/components/card/ngx-com-components-card.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n// Card container types\nexport type CardVariant = 'elevated' | 'outlined' | 'filled' | 'ghost';\nexport type CardPadding = 'none' | 'sm' | 'md' | 'lg';\nexport type CardRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl';\n\n// Card footer / actions alignment\nexport type CardAlign = 'start' | 'end' | 'center' | 'between';\n\n// Card actions direction\nexport type CardActionsDirection = 'row' | 'column';\n\n// Card media position\nexport type CardMediaPosition = 'top' | 'bottom' | 'inset';\n\n// Card accent types\nexport type CardAccentColor = 'primary' | 'accent' | 'warn' | 'success' | 'muted';\nexport type CardAccentPosition = 'top' | 'left';\n\n// Card badge types\nexport type CardBadgeColor = 'primary' | 'accent' | 'warn' | 'success' | 'muted';\nexport type CardBadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\n/**\n * CVA variants for the card container.\n *\n * @tokens `--color-card`, `--color-card-foreground`, `--color-muted`, `--color-muted-hover`,\n * `--color-foreground`, `--color-border`, `--color-primary`, `--color-ring`, `--shadow-card`\n */\nexport const cardVariants: (props?: {\n variant?: CardVariant;\n padding?: CardPadding;\n radius?: CardRadius;\n interactive?: boolean;\n}) => string = cva('relative flex flex-col overflow-hidden', {\n variants: {\n variant: {\n elevated: 'bg-card text-card-foreground shadow-card',\n outlined: 'bg-card text-card-foreground border border-border',\n filled: 'bg-muted text-muted-foreground',\n ghost: 'bg-transparent text-foreground',\n },\n padding: {\n none: '',\n sm: 'p-3',\n md: 'p-5',\n lg: 'p-7',\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-[var(--radius-sm)]',\n md: 'rounded-[var(--radius-md)]',\n lg: 'rounded-card',\n xl: 'rounded-[var(--radius-xl)]',\n },\n interactive: {\n true: 'cursor-pointer outline-none focus-visible:outline-[1px] focus-visible:outline-offset-2 focus-visible:outline-ring',\n false: '',\n },\n },\n compoundVariants: [\n { interactive: true, variant: 'elevated', class: 'hover:shadow-lg active:shadow-sm transition-shadow duration-normal' },\n { interactive: true, variant: 'outlined', class: 'hover:border-primary hover:shadow-sm transition-all duration-normal' },\n { interactive: true, variant: 'filled', class: 'hover:bg-muted-hover transition-colors duration-normal' },\n { interactive: true, variant: 'ghost', class: 'hover:bg-muted transition-colors duration-normal' },\n ],\n defaultVariants: {\n variant: 'elevated',\n padding: 'none',\n radius: 'lg',\n interactive: false,\n },\n});\n\nexport type CardVariants = VariantProps;\n\n/**\n * CVA variants for card footer alignment.\n */\nexport const cardFooterVariants: (props?: {\n align?: CardAlign;\n}) => string = cva('flex items-center gap-2 px-5 pt-0 pb-5', {\n variants: {\n align: {\n start: 'justify-start',\n end: 'justify-end',\n center: 'justify-center',\n between: 'justify-between',\n },\n },\n defaultVariants: {\n align: 'end',\n },\n});\n\nexport type CardFooterVariants = VariantProps;\n\n/**\n * CVA variants for card actions.\n */\nexport const cardActionsVariants: (props?: {\n align?: CardAlign;\n direction?: CardActionsDirection;\n}) => string = cva('flex gap-2 px-5 py-3', {\n variants: {\n align: {\n start: 'justify-start',\n end: 'justify-end',\n center: 'justify-center',\n between: 'justify-between',\n },\n direction: {\n row: 'flex-row items-center',\n column: 'flex-col items-stretch',\n },\n },\n defaultVariants: {\n align: 'end',\n direction: 'row',\n },\n});\n\nexport type CardActionsVariants = VariantProps;\n\n/**\n * CVA variants for card media positioning.\n */\nexport const cardMediaVariants: (props?: {\n position?: CardMediaPosition;\n}) => string = cva('block w-full overflow-hidden object-cover', {\n variants: {\n position: {\n top: '',\n bottom: '',\n inset: 'mx-5 mt-5 rounded-media',\n },\n },\n defaultVariants: {\n position: 'top',\n },\n});\n\nexport type CardMediaVariants = VariantProps;\n\n/**\n * CVA variants for card accent strip.\n *\n * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`, `--color-muted`\n */\nexport const cardAccentVariants: (props?: {\n color?: CardAccentColor;\n position?: CardAccentPosition;\n}) => string = cva('block shrink-0', {\n variants: {\n color: {\n primary: 'bg-primary',\n accent: 'bg-accent',\n warn: 'bg-warn',\n success: 'bg-success',\n muted: 'bg-muted',\n },\n position: {\n top: 'h-1 w-full',\n left: 'w-1 h-full absolute left-0 top-0',\n },\n },\n defaultVariants: {\n color: 'primary',\n position: 'top',\n },\n});\n\nexport type CardAccentVariants = VariantProps;\n\n/**\n * CVA variants for card badge overlay.\n *\n * @tokens `--color-primary`, `--color-primary-foreground`, `--color-accent`, `--color-accent-foreground`,\n * `--color-warn`, `--color-warn-foreground`, `--color-success`, `--color-success-foreground`,\n * `--color-muted`, `--color-muted-foreground`, `--radius-card`, `--radius-media`, `--radius-pill`\n */\nexport const cardBadgeVariants: (props?: {\n position?: CardBadgePosition;\n color?: CardBadgeColor;\n}) => string = cva(\n 'absolute z-10 inline-flex items-center rounded-pill px-2.5 py-0.5 text-xs font-semibold',\n {\n variants: {\n position: {\n 'top-left': 'top-3 left-3',\n 'top-right': 'top-3 right-3',\n 'bottom-left': 'bottom-3 left-3',\n 'bottom-right': 'bottom-3 right-3',\n },\n color: {\n primary: 'bg-primary text-primary-foreground',\n accent: 'bg-accent text-accent-foreground',\n warn: 'bg-warn text-warn-foreground',\n success: 'bg-success text-success-foreground',\n muted: 'bg-muted text-muted-foreground',\n },\n },\n defaultVariants: {\n position: 'top-right',\n color: 'primary',\n },\n }\n);\n\nexport type CardBadgeVariants = VariantProps;\n","import {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n computed,\n input,\n output,\n ViewEncapsulation,\n} from '@angular/core';\nimport type { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from '@angular/core';\nimport { mergeClasses } from './card.utils';\nimport { cardVariants } from './card.variants';\nimport type { CardVariant, CardPadding, CardRadius } from './card.variants';\n\n/**\n * Card container component - a styled surface for content.\n *\n * The card is a pure container with no imposed structure.\n * Use card directives (comCardHeader, comCardContent, etc.) to compose layouts.\n *\n * @tokens `--color-card`, `--color-card-foreground`, `--color-muted`, `--color-muted-foreground`,\n * `--color-muted-hover`, `--color-border`, `--color-primary`, `--color-ring`, `--shadow-card`\n *\n * @example Basic card\n * ```html\n * \n *
Simple content
\n * \n * ```\n *\n * @example Interactive card\n * ```html\n * \n *
Clickable card
\n * \n * ```\n *\n * @example Outlined variant with custom padding\n * ```html\n * \n *

Outlined card with medium padding

\n * \n * ```\n */\n@Component({\n selector: 'com-card',\n exportAs: 'comCard',\n template: ``,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'computedClass()',\n '[attr.tabindex]': 'interactive() ? 0 : null',\n '[attr.role]': 'interactive() ? \"button\" : null',\n '(keydown.enter)': 'onKeyActivate($event)',\n '(keydown.space)': 'onKeyActivate($event)',\n },\n})\nexport class ComCard {\n /** Visual treatment of the card surface. */\n readonly variant: InputSignal = input('elevated');\n\n /** Inner spacing. Default 'none' - sub-parts manage their own padding. */\n readonly padding: InputSignal = input('none');\n\n /** Border radius. */\n readonly radius: InputSignal = input('lg');\n\n /** When true, adds hover/active states and cursor-pointer. */\n readonly interactive: InputSignalWithTransform = input(false, {\n transform: booleanAttribute,\n });\n\n /** Consumer CSS classes - merged with variant classes. */\n readonly userClass: InputSignal = input('', { alias: 'class' });\n\n /** Emitted when an interactive card is activated via keyboard (Enter or Space). */\n readonly cardActivated: OutputEmitterRef = output();\n\n protected readonly computedClass: Signal = computed(() =>\n mergeClasses(\n cardVariants({\n variant: this.variant(),\n padding: this.padding(),\n radius: this.radius(),\n interactive: this.interactive(),\n }),\n this.userClass()\n )\n );\n\n // SSR-safe: only called from user interaction handlers\n protected onKeyActivate(event: Event): void {\n if (!this.interactive()) return;\n event.preventDefault();\n this.cardActivated.emit();\n }\n}\n","import { Directive } from '@angular/core';\n\n/**\n * Card header directive - top section for title and actions.\n *\n * Uses `flex` with `justify-between` so it naturally supports a title group\n * on the left and an action element (icon button, menu trigger) on the right.\n *\n * **Important:** When using both `comCardTitle` and `comCardSubtitle`,\n * wrap them in a container `
` so they stack vertically as a single\n * flex child. Without the wrapper, `justify-between` will push them apart.\n *\n * @example Header with title only\n * ```html\n *
\n *

Card Title

\n *
\n * ```\n *\n * @example Header with title, subtitle, and action\n * ```html\n *
\n *
\n *

Title

\n *

Subtitle

\n *
\n * \n *
\n * ```\n *\n * @tokens None - uses only layout utilities\n */\n@Directive({\n selector: '[comCardHeader]',\n exportAs: 'comCardHeader',\n host: {\n class: 'flex items-center justify-between gap-3 px-5 py-5',\n },\n})\nexport class ComCardHeader {}\n","import { Directive } from '@angular/core';\n\n/**\n * Card title directive - styled heading text.\n *\n * Apply to any heading element. Consumer picks the semantic level (h2, h3, etc.).\n *\n * @example\n * ```html\n *

Project Alpha

\n * ```\n *\n * @tokens `--color-foreground`\n */\n@Directive({\n selector: '[comCardTitle]',\n exportAs: 'comCardTitle',\n host: {\n class: 'font-heading text-lg font-semibold tracking-tight text-foreground',\n },\n})\nexport class ComCardTitle {}\n","import { Directive } from '@angular/core';\n\n/**\n * Card subtitle directive - secondary text styling.\n *\n * @example\n * ```html\n *

Last updated 2 hours ago

\n * ```\n *\n * @tokens `--color-muted-foreground`\n */\n@Directive({\n selector: '[comCardSubtitle]',\n exportAs: 'comCardSubtitle',\n host: {\n class: 'text-sm text-muted-foreground',\n },\n})\nexport class ComCardSubtitle {}\n","import { Directive } from '@angular/core';\n\n/**\n * Card content directive - main body area with consistent padding.\n *\n * @example\n * ```html\n *
\n *

Card body content goes here.

\n *
\n * ```\n *\n * @tokens None - uses only layout utilities\n */\n@Directive({\n selector: '[comCardContent]',\n exportAs: 'comCardContent',\n host: {\n class: 'flex-1 px-5 py-4 text-sm',\n },\n})\nexport class ComCardContent {}\n","import { computed, Directive, input } from '@angular/core';\nimport type { InputSignal, Signal } from '@angular/core';\nimport { mergeClasses } from './card.utils';\nimport { cardFooterVariants } from './card.variants';\nimport type { CardAlign } from './card.variants';\n\n/**\n * Card footer directive - bottom section for metadata or secondary actions.\n *\n * @example Footer with alignment\n * ```html\n *
\n * Updated 3m ago\n * View details\n *
\n * ```\n *\n * @tokens None - uses only layout utilities\n */\n@Directive({\n selector: '[comCardFooter]',\n exportAs: 'comCardFooter',\n host: {\n '[class]': 'computedClass()',\n },\n})\nexport class ComCardFooter {\n /** Horizontal alignment of footer content. */\n readonly align: InputSignal = input('end');\n\n /** Consumer CSS classes - merged with variant classes. */\n readonly userClass: InputSignal = input('', { alias: 'class' });\n\n protected readonly computedClass: Signal = computed(() =>\n mergeClasses(cardFooterVariants({ align: this.align() }), this.userClass())\n );\n}\n","import { computed, Directive, input } from '@angular/core';\nimport type { InputSignal, Signal } from '@angular/core';\nimport { mergeClasses } from './card.utils';\nimport { cardActionsVariants } from './card.variants';\nimport type { CardAlign, CardActionsDirection } from './card.variants';\n\n/**\n * Card actions directive - dedicated button row for primary card actions.\n *\n * Separate from footer because actions and footer metadata serve different purposes.\n *\n * @example Actions with alignment\n * ```html\n *
\n * \n * \n *
\n * ```\n *\n * @example Stacked column layout\n * ```html\n *
\n * \n * \n *
\n * ```\n *\n * @tokens None - uses only layout utilities\n */\n@Directive({\n selector: '[comCardActions]',\n exportAs: 'comCardActions',\n host: {\n '[class]': 'computedClass()',\n },\n})\nexport class ComCardActions {\n /** Horizontal alignment of actions. */\n readonly align: InputSignal = input('end');\n\n /** Layout direction - row or column. */\n readonly direction: InputSignal = input('row');\n\n /** Consumer CSS classes - merged with variant classes. */\n readonly userClass: InputSignal = input('', { alias: 'class' });\n\n protected readonly computedClass: Signal = computed(() =>\n mergeClasses(\n cardActionsVariants({\n align: this.align(),\n direction: this.direction(),\n }),\n this.userClass()\n )\n );\n}\n","import { computed, Directive, input } from '@angular/core';\nimport type { InputSignal, Signal } from '@angular/core';\nimport { mergeClasses } from './card.utils';\nimport { cardMediaVariants } from './card.variants';\nimport type { CardMediaPosition } from './card.variants';\n\n/**\n * Card media directive - image/video slot with aspect ratio handling.\n *\n * Apply to ,