ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com-components-card.mjs

@@ -0,0 +1,590 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { mergeClasses } from 'ngx-com/utils';
+import { cva } from 'class-variance-authority';
+
+/**
+ * CVA variants for the card container.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-muted`, `--color-muted-hover`,
+ *         `--color-foreground`, `--color-border`, `--color-primary`, `--color-ring`
+ */
+const cardVariants = cva('relative flex flex-col overflow-hidden', {
+    variants: {
+        variant: {
+            elevated: 'bg-popover text-popover-foreground shadow-md',
+            outlined: 'bg-popover text-popover-foreground border border-border',
+            filled: 'bg-muted text-foreground',
+            ghost: 'bg-transparent text-foreground',
+        },
+        padding: {
+            none: '',
+            sm: 'p-3',
+            md: 'p-5',
+            lg: 'p-7',
+        },
+        radius: {
+            none: 'rounded-none',
+            sm: 'rounded-[var(--radius-sm)]',
+            md: 'rounded-[var(--radius-md)]',
+            lg: 'rounded-card',
+            xl: 'rounded-[var(--radius-xl)]',
+        },
+        interactive: {
+            true: 'cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+            false: '',
+        },
+    },
+    compoundVariants: [
+        { interactive: true, variant: 'elevated', class: 'hover:shadow-lg active:shadow-sm transition-shadow duration-150' },
+        { interactive: true, variant: 'outlined', class: 'hover:border-primary hover:shadow-sm transition-all duration-150' },
+        { interactive: true, variant: 'filled', class: 'hover:bg-muted-hover transition-colors duration-150' },
+        { interactive: true, variant: 'ghost', class: 'hover:bg-muted transition-colors duration-150' },
+    ],
+    defaultVariants: {
+        variant: 'elevated',
+        padding: 'none',
+        radius: 'lg',
+        interactive: false,
+    },
+});
+/**
+ * CVA variants for card footer alignment.
+ */
+const cardFooterVariants = cva('flex items-center gap-2 px-5 pt-0 pb-5', {
+    variants: {
+        align: {
+            start: 'justify-start',
+            end: 'justify-end',
+            center: 'justify-center',
+            between: 'justify-between',
+        },
+    },
+    defaultVariants: {
+        align: 'end',
+    },
+});
+/**
+ * CVA variants for card actions.
+ */
+const cardActionsVariants = cva('flex gap-2 px-5 py-3', {
+    variants: {
+        align: {
+            start: 'justify-start',
+            end: 'justify-end',
+            center: 'justify-center',
+            between: 'justify-between',
+        },
+        direction: {
+            row: 'flex-row items-center',
+            column: 'flex-col items-stretch',
+        },
+    },
+    defaultVariants: {
+        align: 'end',
+        direction: 'row',
+    },
+});
+/**
+ * CVA variants for card media positioning.
+ */
+const cardMediaVariants = cva('block w-full overflow-hidden object-cover', {
+    variants: {
+        position: {
+            top: '',
+            bottom: '',
+            inset: 'mx-5 mt-5 rounded-media',
+        },
+    },
+    defaultVariants: {
+        position: 'top',
+    },
+});
+/**
+ * CVA variants for card accent strip.
+ *
+ * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`, `--color-muted`
+ */
+const cardAccentVariants = cva('block shrink-0', {
+    variants: {
+        color: {
+            primary: 'bg-primary',
+            accent: 'bg-accent',
+            warn: 'bg-warn',
+            success: 'bg-success',
+            muted: 'bg-muted',
+        },
+        position: {
+            top: 'h-1 w-full',
+            left: 'w-1 h-full absolute left-0 top-0',
+        },
+    },
+    defaultVariants: {
+        color: 'primary',
+        position: 'top',
+    },
+});
+/**
+ * CVA variants for card badge overlay.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-accent`, `--color-accent-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-success`, `--color-success-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`, `--radius-card`, `--radius-media`, `--radius-pill`
+ */
+const cardBadgeVariants = cva('absolute z-10 inline-flex items-center rounded-pill px-2.5 py-0.5 text-xs font-semibold', {
+    variants: {
+        position: {
+            'top-left': 'top-3 left-3',
+            'top-right': 'top-3 right-3',
+            'bottom-left': 'bottom-3 left-3',
+            'bottom-right': 'bottom-3 right-3',
+        },
+        color: {
+            primary: 'bg-primary text-primary-foreground',
+            accent: 'bg-accent text-accent-foreground',
+            warn: 'bg-warn text-warn-foreground',
+            success: 'bg-success text-success-foreground',
+            muted: 'bg-muted text-muted-foreground',
+        },
+    },
+    defaultVariants: {
+        position: 'top-right',
+        color: 'primary',
+    },
+});
+
+/**
+ * Card container component - a styled surface for content.
+ *
+ * The card is a pure container with no imposed structure.
+ * Use card directives (comCardHeader, comCardContent, etc.) to compose layouts.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-muted`, `--color-muted-hover`,
+ *         `--color-foreground`, `--color-border`, `--color-primary`, `--color-ring`
+ *
+ * @example Basic card
+ * ```html
+ * <com-card>
+ *   <div comCardContent>Simple content</div>
+ * </com-card>
+ * ```
+ *
+ * @example Interactive card
+ * ```html
+ * <com-card [interactive]="true" (click)="onCardClick()">
+ *   <div comCardContent>Clickable card</div>
+ * </com-card>
+ * ```
+ *
+ * @example Outlined variant with custom padding
+ * ```html
+ * <com-card variant="outlined" padding="md">
+ *   <p>Outlined card with medium padding</p>
+ * </com-card>
+ * ```
+ */
+class ComCard {
+    /** Visual treatment of the card surface. */
+    variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Inner spacing. Default 'none' - sub-parts manage their own padding. */
+    padding = input('none', ...(ngDevMode ? [{ debugName: "padding" }] : []));
+    /** Border radius. */
+    radius = input('lg', ...(ngDevMode ? [{ debugName: "radius" }] : []));
+    /** When true, adds hover/active states and cursor-pointer. */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : {}), transform: booleanAttribute });
+    /** Consumer CSS classes - merged with variant classes. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    computedClass = computed(() => mergeClasses(cardVariants({
+        variant: this.variant(),
+        padding: this.padding(),
+        radius: this.radius(),
+        interactive: this.interactive(),
+    }), this.userClass()), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: ComCard, isStandalone: true, selector: "com-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, exportAs: ["comCard"], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'com-card',
+                    exportAs: 'comCard',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Card header directive - top section for title and actions.
+ *
+ * Uses justify-between so it naturally supports a title group on the left
+ * and an action element (icon button, menu trigger) on the right.
+ *
+ * @example Header with title
+ * ```html
+ * <div comCardHeader>
+ *   <h3 comCardTitle>Card Title</h3>
+ * </div>
+ * ```
+ *
+ * @example Header with title and action
+ * ```html
+ * <div comCardHeader>
+ *   <div>
+ *     <h3 comCardTitle>Title</h3>
+ *     <p comCardSubtitle>Subtitle</p>
+ *   </div>
+ *   <button comButton variant="ghost" size="icon" aria-label="More">...</button>
+ * </div>
+ * ```
+ *
+ * @tokens None - uses only layout utilities
+ */
+class ComCardHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCardHeader, isStandalone: true, selector: "[comCardHeader]", host: { classAttribute: "flex items-start justify-between gap-3 px-5 pt-5 pb-0" }, exportAs: ["comCardHeader"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCardHeader]',
+                    exportAs: 'comCardHeader',
+                    host: {
+                        class: 'flex items-start justify-between gap-3 px-5 pt-5 pb-0',
+                    },
+                }]
+        }] });
+
+/**
+ * Card title directive - styled heading text.
+ *
+ * Apply to any heading element. Consumer picks the semantic level (h2, h3, etc.).
+ *
+ * @example
+ * ```html
+ * <h3 comCardTitle>Project Alpha</h3>
+ * ```
+ *
+ * @tokens `--color-foreground`
+ */
+class ComCardTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCardTitle, isStandalone: true, selector: "[comCardTitle]", host: { classAttribute: "font-heading text-lg font-semibold tracking-tight text-foreground" }, exportAs: ["comCardTitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCardTitle]',
+                    exportAs: 'comCardTitle',
+                    host: {
+                        class: 'font-heading text-lg font-semibold tracking-tight text-foreground',
+                    },
+                }]
+        }] });
+
+/**
+ * Card subtitle directive - secondary text styling.
+ *
+ * @example
+ * ```html
+ * <p comCardSubtitle>Last updated 2 hours ago</p>
+ * ```
+ *
+ * @tokens `--color-muted-foreground`
+ */
+class ComCardSubtitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardSubtitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCardSubtitle, isStandalone: true, selector: "[comCardSubtitle]", host: { classAttribute: "text-sm text-muted-foreground" }, exportAs: ["comCardSubtitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardSubtitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCardSubtitle]',
+                    exportAs: 'comCardSubtitle',
+                    host: {
+                        class: 'text-sm text-muted-foreground',
+                    },
+                }]
+        }] });
+
+/**
+ * Card content directive - main body area with consistent padding.
+ *
+ * @example
+ * ```html
+ * <div comCardContent>
+ *   <p>Card body content goes here.</p>
+ * </div>
+ * ```
+ *
+ * @tokens None - uses only layout utilities
+ */
+class ComCardContent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComCardContent, isStandalone: true, selector: "[comCardContent]", host: { classAttribute: "flex-1 px-5 py-4 text-sm" }, exportAs: ["comCardContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCardContent]',
+                    exportAs: 'comCardContent',
+                    host: {
+                        class: 'flex-1 px-5 py-4 text-sm',
+                    },
+                }]
+        }] });
+
+/**
+ * Card footer directive - bottom section for metadata or secondary actions.
+ *
+ * @example Footer with alignment
+ * ```html
+ * <div comCardFooter align="between">
+ *   <span class="text-sm text-muted-foreground">Updated 3m ago</span>
+ *   <a comButton variant="link" size="sm">View details</a>
+ * </div>
+ * ```
+ *
+ * @tokens None - uses only layout utilities
+ */
+class ComCardFooter {
+    /** Horizontal alignment of footer content. */
+    align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    computedClass = computed(() => cardFooterVariants({ align: this.align() }), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComCardFooter, isStandalone: true, selector: "[comCardFooter]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, exportAs: ["comCardFooter"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCardFooter]',
+                    exportAs: 'comCardFooter',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
+
+/**
+ * Card actions directive - dedicated button row for primary card actions.
+ *
+ * Separate from footer because actions and footer metadata serve different purposes.
+ *
+ * @example Actions with alignment
+ * ```html
+ * <div comCardActions>
+ *   <button comButton variant="ghost" size="sm">Cancel</button>
+ *   <button comButton size="sm">Confirm</button>
+ * </div>
+ * ```
+ *
+ * @example Stacked column layout
+ * ```html
+ * <div comCardActions direction="column" align="start">
+ *   <button comButton fullWidth>Primary Action</button>
+ *   <button comButton variant="outline" fullWidth>Secondary</button>
+ * </div>
+ * ```
+ *
+ * @tokens None - uses only layout utilities
+ */
+class ComCardActions {
+    /** Horizontal alignment of actions. */
+    align = input('end', ...(ngDevMode ? [{ debugName: "align" }] : []));
+    /** Layout direction - row or column. */
+    direction = input('row', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+    computedClass = computed(() => cardActionsVariants({
+        align: this.align(),
+        direction: this.direction(),
+    }), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComCardActions, isStandalone: true, selector: "[comCardActions]", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, exportAs: ["comCardActions"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCardActions]',
+                    exportAs: 'comCardActions',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }] } });
+
+/**
+ * Card media directive - image/video slot with aspect ratio handling.
+ *
+ * Apply to <img>, <video>, <picture>, or a wrapper <div>.
+ *
+ * @example Top media (bleeds to edge)
+ * ```html
+ * <img comCardMedia src="/hero.jpg" alt="Hero image" />
+ * ```
+ *
+ * @example Inset media (padded with rounded corners)
+ * ```html
+ * <img comCardMedia position="inset" src="/preview.jpg" alt="Preview" />
+ * ```
+ *
+ * @tokens None - uses only layout utilities
+ */
+class ComCardMedia {
+    /** Media positioning within the card. */
+    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    computedClass = computed(() => cardMediaVariants({ position: this.position() }), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComCardMedia, isStandalone: true, selector: "[comCardMedia]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, exportAs: ["comCardMedia"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardMedia, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCardMedia]',
+                    exportAs: 'comCardMedia',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+/**
+ * Card divider directive - horizontal rule between card sections.
+ *
+ * @example Standard divider (with side margins)
+ * ```html
+ * <hr comCardDivider />
+ * ```
+ *
+ * @example Full-width divider (edge to edge)
+ * ```html
+ * <hr comCardDivider [inset]="true" />
+ * ```
+ *
+ * @tokens `--color-border`
+ */
+class ComCardDivider {
+    /** When true, divider spans full card width (no horizontal margin). */
+    inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : {}), transform: booleanAttribute });
+    /** Consumer CSS classes. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    computedClass = computed(() => mergeClasses('block border-t border-border', this.inset() ? 'mx-0' : 'mx-5', this.userClass()), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComCardDivider, isStandalone: true, selector: "[comCardDivider]", inputs: { inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, exportAs: ["comCardDivider"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardDivider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCardDivider]',
+                    exportAs: 'comCardDivider',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Card accent directive - colored strip for status or category indication.
+ *
+ * Place as the first child of the card for top accent, or use position="left"
+ * for a left-edge strip (requires adding left padding to content).
+ *
+ * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`, `--color-muted`
+ *
+ * @example Top accent strip
+ * ```html
+ * <com-card>
+ *   <div comCardAccent color="warn"></div>
+ *   <div comCardContent>Warning content</div>
+ * </com-card>
+ * ```
+ *
+ * @example Left accent strip
+ * ```html
+ * <com-card>
+ *   <div comCardAccent color="success" position="left"></div>
+ *   <div comCardContent class="pl-5">Content with left padding</div>
+ * </com-card>
+ * ```
+ */
+class ComCardAccent {
+    /** Accent color. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    /** Position of the accent strip. */
+    position = input('top', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    computedClass = computed(() => cardAccentVariants({
+        color: this.color(),
+        position: this.position(),
+    }), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardAccent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComCardAccent, isStandalone: true, selector: "[comCardAccent]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, exportAs: ["comCardAccent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardAccent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCardAccent]',
+                    exportAs: 'comCardAccent',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+/**
+ * Card badge directive - positioned overlay for labels, tags, or status indicators.
+ *
+ * Floats over the card content (e.g., "NEW", "SALE", "Featured").
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-accent`, `--color-accent-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-success`, `--color-success-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`, `--radius-pill`
+ *
+ * @example Badge in top-right corner
+ * ```html
+ * <com-card>
+ *   <span comCardBadge>NEW</span>
+ *   <img comCardMedia src="/product.jpg" alt="Product" />
+ * </com-card>
+ * ```
+ *
+ * @example Badge with custom position and color
+ * ```html
+ * <com-card>
+ *   <span comCardBadge position="top-left" color="warn">SALE</span>
+ *   <div comCardContent>Product details</div>
+ * </com-card>
+ * ```
+ */
+class ComCardBadge {
+    /** Badge position within the card. */
+    position = input('top-right', ...(ngDevMode ? [{ debugName: "position" }] : []));
+    /** Badge color. */
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    computedClass = computed(() => cardBadgeVariants({
+        position: this.position(),
+        color: this.color(),
+    }), ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardBadge, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: ComCardBadge, isStandalone: true, selector: "[comCardBadge]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "computedClass()" } }, exportAs: ["comCardBadge"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComCardBadge, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comCardBadge]',
+                    exportAs: 'comCardBadge',
+                    host: {
+                        '[class]': 'computedClass()',
+                    },
+                }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+// Public API for the card component system
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComCard, ComCardAccent, ComCardActions, ComCardBadge, ComCardContent, ComCardDivider, ComCardFooter, ComCardHeader, ComCardMedia, ComCardSubtitle, ComCardTitle, cardAccentVariants, cardActionsVariants, cardBadgeVariants, cardFooterVariants, cardMediaVariants, cardVariants };
+//# sourceMappingURL=ngx-com-components-card.mjs.map