ngx-com 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-com",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "license": "MIT",
   "description": "A modern Angular component library built with signals, Tailwind CSS, and semantic design tokens",
   "keywords": [

package/types/ngx-com-components-card.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from '@angular/core';
 import { VariantProps } from 'class-variance-authority';
 
 type CardVariant = 'elevated' | 'outlined' | 'filled' | 'ghost';
@@ -76,8 +76,8 @@ type CardBadgeVariants = VariantProps<typeof cardBadgeVariants>;
  * 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`
+ * @tokens `--color-card`, `--color-card-foreground`, `--color-muted`, `--color-muted-foreground`,
+ *         `--color-muted-hover`, `--color-border`, `--color-primary`, `--color-ring`, `--shadow-card`
  *
  * @example Basic card
  * ```html
@@ -111,25 +111,32 @@ declare class ComCard {
     readonly interactive: InputSignalWithTransform<boolean, unknown>;
     /** Consumer CSS classes - merged with variant classes. */
     readonly userClass: InputSignal<string>;
+    /** Emitted when an interactive card is activated via keyboard (Enter or Space). */
+    readonly cardActivated: OutputEmitterRef<void>;
     protected readonly computedClass: Signal<string>;
+    protected onKeyActivate(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComCard, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComCard, "com-card", ["comCard"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComCard, "com-card", ["comCard"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "cardActivated": "cardActivated"; }, never, ["*"], true, never>;
 }
 
 /**
  * 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.
+ * Uses `flex` with `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
+ * **Important:** When using both `comCardTitle` and `comCardSubtitle`,
+ * wrap them in a container `<div>` so they stack vertically as a single
+ * flex child. Without the wrapper, `justify-between` will push them apart.
+ *
+ * @example Header with title only
  * ```html
  * <div comCardHeader>
  *   <h3 comCardTitle>Card Title</h3>
  * </div>
  * ```
  *
- * @example Header with title and action
+ * @example Header with title, subtitle, and action
  * ```html
  * <div comCardHeader>
  *   <div>
@@ -212,9 +219,11 @@ declare class ComCardContent {
 declare class ComCardFooter {
     /** Horizontal alignment of footer content. */
     readonly align: InputSignal<CardAlign>;
+    /** Consumer CSS classes - merged with variant classes. */
+    readonly userClass: InputSignal<string>;
     protected readonly computedClass: Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComCardFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardFooter, "[comCardFooter]", ["comCardFooter"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardFooter, "[comCardFooter]", ["comCardFooter"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -245,9 +254,11 @@ declare class ComCardActions {
     readonly align: InputSignal<CardAlign>;
     /** Layout direction - row or column. */
     readonly direction: InputSignal<CardActionsDirection>;
+    /** Consumer CSS classes - merged with variant classes. */
+    readonly userClass: InputSignal<string>;
     protected readonly computedClass: Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComCardActions, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardActions, "[comCardActions]", ["comCardActions"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardActions, "[comCardActions]", ["comCardActions"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -270,9 +281,11 @@ declare class ComCardActions {
 declare class ComCardMedia {
     /** Media positioning within the card. */
     readonly position: InputSignal<CardMediaPosition>;
+    /** Consumer CSS classes - merged with variant classes. */
+    readonly userClass: InputSignal<string>;
     protected readonly computedClass: Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComCardMedia, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardMedia, "[comCardMedia]", ["comCardMedia"], { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardMedia, "[comCardMedia]", ["comCardMedia"], { "position": { "alias": "position"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -329,9 +342,11 @@ declare class ComCardAccent {
     readonly color: InputSignal<CardAccentColor>;
     /** Position of the accent strip. */
     readonly position: InputSignal<CardAccentPosition>;
+    /** Consumer CSS classes - merged with variant classes. */
+    readonly userClass: InputSignal<string>;
     protected readonly computedClass: Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComCardAccent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardAccent, "[comCardAccent]", ["comCardAccent"], { "color": { "alias": "color"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardAccent, "[comCardAccent]", ["comCardAccent"], { "color": { "alias": "color"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -364,9 +379,11 @@ declare class ComCardBadge {
     readonly position: InputSignal<CardBadgePosition>;
     /** Badge color. */
     readonly color: InputSignal<CardBadgeColor>;
+    /** Consumer CSS classes - merged with variant classes. */
+    readonly userClass: InputSignal<string>;
     protected readonly computedClass: Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComCardBadge, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardBadge, "[comCardBadge]", ["comCardBadge"], { "position": { "alias": "position"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardBadge, "[comCardBadge]", ["comCardBadge"], { "position": { "alias": "position"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { ComCard, ComCardAccent, ComCardActions, ComCardBadge, ComCardContent, ComCardDivider, ComCardFooter, ComCardHeader, ComCardMedia, ComCardSubtitle, ComCardTitle, cardAccentVariants, cardActionsVariants, cardBadgeVariants, cardFooterVariants, cardMediaVariants, cardVariants };

package/types/ngx-com-components-dialog.d.ts

@@ -1,7 +1,7 @@
 import { Observable } from 'rxjs';
-import { OverlayRef } from '@angular/cdk/overlay';
+import { OverlayRef, PositionStrategy, ScrollStrategy } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { TemplateRef, OnInit, WritableSignal, InputSignal, InjectionToken, Provider } from '@angular/core';
+import { Injector, ViewContainerRef, StaticProvider, TemplateRef, OnInit, WritableSignal, InputSignal, InjectionToken, Provider } from '@angular/core';
 import { ComponentType } from '@angular/cdk/portal';
 import { VariantProps } from 'class-variance-authority';
 
@@ -41,6 +41,10 @@ declare class ComDialogRef<R = unknown> {
 
 /** Available dialog size variants. */
 type ComDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** ARIA role for the dialog panel. */
+type ComDialogRole = 'dialog' | 'alertdialog';
+/** Where to restore focus after the dialog closes. */
+type ComRestoreFocusTarget = boolean | string | HTMLElement;
 /** Configuration for opening a dialog. */
 interface ComDialogConfig<D = unknown> {
     /** Data to inject via COM_DIALOG_DATA. */
@@ -51,16 +55,52 @@ interface ComDialogConfig<D = unknown> {
     disableClose?: boolean;
     /** Show backdrop overlay. */
     hasBackdrop?: boolean;
-    /** Additional CSS class on the backdrop. */
-    backdropClass?: string;
-    /** Additional CSS class on the container panel. */
-    panelClass?: string;
+    /** Additional CSS class(es) on the backdrop. */
+    backdropClass?: string | string[];
+    /** Additional CSS class(es) on the container panel. */
+    panelClass?: string | string[];
     /** Where to send focus on open. */
     autoFocus?: 'first-tabbable' | 'dialog' | false;
-    /** Return focus to trigger element on close. */
-    restoreFocus?: boolean;
+    /**
+     * Controls focus restoration after the dialog closes.
+     * - `true`: restore focus to the previously focused element (default).
+     * - `false`: do not restore focus.
+     * - `string`: CSS selector — the first matching element receives focus.
+     * - `HTMLElement`: the specific element receives focus.
+     */
+    restoreFocus?: ComRestoreFocusTarget;
     /** Fallback aria-label if no comDialogTitle is projected. */
     ariaLabel?: string;
+    /** ARIA role on the dialog panel. Use `'alertdialog'` for confirmations/destructive actions. */
+    role?: ComDialogRole;
+    /**
+     * Custom parent injector for dialog content.
+     * Takes precedence over `viewContainerRef` injector.
+     */
+    injector?: Injector;
+    /**
+     * Determines logical Angular tree placement for DI resolution.
+     * Its injector is used as parent when `injector` is not set.
+     */
+    viewContainerRef?: ViewContainerRef;
+    /** Additional providers injected into the dialog content's injector. */
+    providers?: StaticProvider[];
+    /** Custom CDK position strategy. Defaults to globally centered. */
+    positionStrategy?: PositionStrategy;
+    /** Custom CDK scroll strategy. Defaults to block scroll. */
+    scrollStrategy?: ScrollStrategy;
+    /** Explicit CSS width on the panel (e.g. `'600px'`, `'80vw'`). Overrides size variant width. */
+    width?: string;
+    /** Explicit CSS height on the panel. */
+    height?: string;
+    /** CSS min-width on the panel. Numbers are treated as pixels. */
+    minWidth?: string | number;
+    /** CSS min-height on the panel. Numbers are treated as pixels. */
+    minHeight?: string | number;
+    /** CSS max-width on the panel. Numbers are treated as pixels. Overrides size variant max-width. */
+    maxWidth?: string | number;
+    /** CSS max-height on the panel. Numbers are treated as pixels. Overrides size variant max-height. */
+    maxHeight?: string | number;
 }
 /** Content that can be opened in a dialog. */
 type ComDialogContent$1<T = unknown> = ComponentType<T> | TemplateRef<T>;
@@ -264,4 +304,4 @@ declare const dialogContentVariants: () => string;
 declare const dialogActionsVariants: () => string;
 
 export { COM_DIALOG_CONFIG, COM_DIALOG_DATA, ComDialog, ComDialogActions, ComDialogClose, ComDialogContent, ComDialogRef, ComDialogTitle, dialogActionsVariants, dialogBackdropVariants, dialogContentVariants, dialogPanelVariants, dialogTitleVariants, provideComDialogConfig };
-export type { ComDialogConfig, ComDialogSize, ComDialogTemplateContext, DialogPanelVariantProps };
+export type { ComDialogConfig, ComDialogRole, ComDialogSize, ComDialogTemplateContext, ComRestoreFocusTarget, DialogPanelVariantProps };