ngx-com 0.0.19 → 0.0.20

package/types/ngx-com-components-code-block.d.ts

@@ -0,0 +1,66 @@
+import * as i0 from '@angular/core';
+import { InputSignal, OutputEmitterRef, WritableSignal, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+type CodeBlockVariant = 'filled' | 'outlined';
+/**
+ * CVA variants for the code block container.
+ *
+ * @tokens `--color-muted`, `--color-foreground`,
+ *         `--color-border`, `--color-border-subtle`,
+ *         `--radius-card`, `--font-mono`
+ */
+declare const codeBlockVariants: (props?: {
+    variant?: CodeBlockVariant;
+}) => string;
+type CodeBlockVariants = VariantProps<typeof codeBlockVariants>;
+
+/**
+ * Code block component for displaying code snippets with a language label
+ * and copy-to-clipboard functionality.
+ *
+ * Renders plain monospace text in a styled container — no syntax highlighting.
+ * The header bar shows an optional language label and a copy button that
+ * provides visual feedback (checkmark icon for 2 seconds) after copying.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-foreground`, `--color-border`, `--color-border-subtle`,
+ *         `--color-ring`, `--color-success`,
+ *         `--font-mono`, `--radius-card`
+ *
+ * @example Basic usage with language label
+ * ```html
+ * <com-code-block code="const x = 42;" language="TypeScript" />
+ * ```
+ *
+ * @example Outlined variant
+ * ```html
+ * <com-code-block [code]="htmlSnippet" language="HTML" variant="outlined" />
+ * ```
+ */
+declare class ComCodeBlockComponent {
+    /** The raw code string to display. */
+    readonly code: InputSignal<string>;
+    /** Language label shown in the header (e.g. 'TypeScript', 'HTML'). */
+    readonly language: InputSignal<string | undefined>;
+    /** Visual variant. */
+    readonly variant: InputSignal<CodeBlockVariant>;
+    /** Consumer CSS classes — merged with variant classes. */
+    readonly userClass: InputSignal<string>;
+    /** Emitted when code is successfully copied to clipboard. */
+    readonly copied: OutputEmitterRef<void>;
+    /** @internal Tracks copy feedback state. */
+    protected readonly isCopied: WritableSignal<boolean>;
+    /** @internal Computed host element classes. */
+    protected readonly hostClasses: Signal<string>;
+    private readonly clipboard;
+    private readonly destroyRef;
+    private copyTimeoutId;
+    /** Copies the code to clipboard and shows feedback for 2 seconds. */
+    protected copyToClipboard(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCodeBlockComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComCodeBlockComponent, "com-code-block", ["comCodeBlock"], { "code": { "alias": "code"; "required": true; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "copied": "copied"; }, never, never, true, never>;
+}
+
+export { ComCodeBlockComponent, codeBlockVariants };
+export type { CodeBlockVariant, CodeBlockVariants };

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

@@ -31,7 +31,7 @@ interface ConfirmTemplateContext {
  * and emits `true` (confirmed) or `false` (cancelled) through its output.
  *
  * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,
- *         `--color-foreground`, `--color-muted-foreground`, `--color-background`,
+ *         `--color-foreground`, `--color-muted-foreground`, `--color-backdrop`,
  *         `--shadow-lg`, `--radius-popover`
  *
  * @example Basic confirmation
@@ -126,7 +126,7 @@ declare class ComConfirm {
 /**
  * CVA variants for the confirmation panel backdrop.
  *
- * @tokens `--color-background`
+ * @tokens `--color-backdrop`
  */
 declare const confirmBackdropVariants: (props?: {
     visible?: boolean;

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

@@ -0,0 +1,264 @@
+import { Observable } from 'rxjs';
+import { OverlayRef } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { TemplateRef, OnInit, WritableSignal, InputSignal, InjectionToken, Provider } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Reference to an open dialog instance.
+ * Returned by `ComDialog.open()` for programmatic control.
+ */
+declare class ComDialogRef<R = unknown> {
+    private readonly afterClosedSubject;
+    private readonly backdropClickSubject;
+    private closed;
+    /** @internal */
+    _overlayRef: OverlayRef | null;
+    /** @internal */
+    _closeFn: ((result?: R) => void) | null;
+    /**
+     * Close the dialog, optionally passing a result value.
+     */
+    close(result?: R): void;
+    /**
+     * Emits the result once after the dialog is fully closed and disposed.
+     */
+    afterClosed(): Observable<R | undefined>;
+    /**
+     * Emits each time the backdrop is clicked.
+     */
+    backdropClick(): Observable<MouseEvent>;
+    /**
+     * Proxies keydown events from the overlay.
+     */
+    keydownEvents(): Observable<KeyboardEvent>;
+    /** @internal Called by the service after exit animation completes. */
+    _notifyClosed(result?: R): void;
+    /** @internal Forward backdrop click from overlay. */
+    _notifyBackdropClick(event: MouseEvent): void;
+}
+
+/** Available dialog size variants. */
+type ComDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** Configuration for opening a dialog. */
+interface ComDialogConfig<D = unknown> {
+    /** Data to inject via COM_DIALOG_DATA. */
+    data?: D;
+    /** Dialog panel width variant. */
+    size?: ComDialogSize;
+    /** Prevent Escape and backdrop click from closing. */
+    disableClose?: boolean;
+    /** Show backdrop overlay. */
+    hasBackdrop?: boolean;
+    /** Additional CSS class on the backdrop. */
+    backdropClass?: string;
+    /** Additional CSS class on the container panel. */
+    panelClass?: string;
+    /** Where to send focus on open. */
+    autoFocus?: 'first-tabbable' | 'dialog' | false;
+    /** Return focus to trigger element on close. */
+    restoreFocus?: boolean;
+    /** Fallback aria-label if no comDialogTitle is projected. */
+    ariaLabel?: string;
+}
+/** Content that can be opened in a dialog. */
+type ComDialogContent$1<T = unknown> = ComponentType<T> | TemplateRef<T>;
+/** Template context when opening a TemplateRef dialog. */
+interface ComDialogTemplateContext<R = unknown, D = unknown> {
+    $implicit: ComDialogRef<R>;
+    data: D;
+}
+
+/**
+ * Service for opening dialog modals imperatively.
+ *
+ * @example
+ * ```typescript
+ * const dialog = inject(ComDialog);
+ *
+ * // Open a component
+ * const ref = dialog.open<boolean>(ConfirmComponent, { data: { id: 123 } });
+ * ref.afterClosed().subscribe(result => {
+ *   if (result) performAction();
+ * });
+ *
+ * // Open a template
+ * dialog.open(templateRef, { size: 'sm' });
+ * ```
+ */
+declare class ComDialog {
+    private readonly overlay;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly platformId;
+    private readonly document;
+    private readonly globalConfig;
+    private readonly openDialogs;
+    /**
+     * Open a dialog with the given component or template.
+     *
+     * @param content - The component class or TemplateRef to render inside the dialog.
+     * @param config - Optional dialog configuration.
+     * @returns A reference to the opened dialog.
+     */
+    open<R = unknown, D = unknown>(content: ComDialogContent$1, config?: ComDialogConfig<D>): ComDialogRef<R>;
+    /** Close all open dialogs. */
+    closeAll(): void;
+    /** Number of currently open dialogs. */
+    get openDialogCount(): number;
+    private resolveConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDialog, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ComDialog>;
+}
+
+/**
+ * Marks an element as the dialog title. Sets up aria-labelledby
+ * binding on the dialog container.
+ *
+ * @example
+ * ```html
+ * <h2 comDialogTitle>Delete item</h2>
+ * ```
+ *
+ * @tokens `--color-foreground`
+ */
+declare class ComDialogTitle implements OnInit {
+    private readonly containerRef;
+    /** Unique ID for aria-labelledby binding. */
+    readonly id: WritableSignal<string>;
+    /** Computed CSS classes. */
+    readonly classes: WritableSignal<string>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDialogTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComDialogTitle, "[comDialogTitle]", ["comDialogTitle"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Marks an element as the dialog content area. Sets up aria-describedby
+ * binding on the dialog container.
+ *
+ * @example
+ * ```html
+ * <div comDialogContent>
+ *   <p>Are you sure you want to delete this item?</p>
+ * </div>
+ * ```
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare class ComDialogContent implements OnInit {
+    private readonly containerRef;
+    /** Unique ID for aria-describedby binding. */
+    readonly id: WritableSignal<string>;
+    /** Computed CSS classes. */
+    readonly classes: WritableSignal<string>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDialogContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComDialogContent, "[comDialogContent]", ["comDialogContent"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Marks an element as the dialog actions area (footer with buttons).
+ *
+ * @example
+ * ```html
+ * <div comDialogActions>
+ *   <button comButton variant="outline" [comDialogClose]="false">Cancel</button>
+ *   <button comButton [comDialogClose]="true">Confirm</button>
+ * </div>
+ * ```
+ */
+declare class ComDialogActions {
+    /** Computed CSS classes. */
+    readonly classes: WritableSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDialogActions, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComDialogActions, "[comDialogActions]", ["comDialogActions"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Closes the nearest dialog when the host element is clicked.
+ * Optionally passes a result value.
+ *
+ * @example
+ * ```html
+ * <button comButton [comDialogClose]="false">Cancel</button>
+ * <button comButton [comDialogClose]="true">Confirm</button>
+ * ```
+ */
+declare class ComDialogClose {
+    private readonly dialogRef;
+    /** The result value to pass when closing the dialog. */
+    readonly comDialogClose: InputSignal<unknown>;
+    protected onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDialogClose, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComDialogClose, "[comDialogClose]", ["comDialogClose"], { "comDialogClose": { "alias": "comDialogClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Injection token for data passed to a dialog component.
+ *
+ * @example
+ * ```typescript
+ * readonly data = inject<MyData>(COM_DIALOG_DATA);
+ * ```
+ */
+declare const COM_DIALOG_DATA: InjectionToken<unknown>;
+/**
+ * Injection token for global dialog configuration defaults.
+ * @internal
+ */
+declare const COM_DIALOG_CONFIG: InjectionToken<ComDialogConfig>;
+/**
+ * Provides global dialog configuration defaults.
+ *
+ * @example
+ * ```typescript
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideComDialogConfig({ size: 'lg', hasBackdrop: true }),
+ *   ],
+ * });
+ * ```
+ */
+declare function provideComDialogConfig(config: ComDialogConfig): Provider;
+
+/**
+ * CVA variants for the dialog backdrop.
+ *
+ * @tokens `--color-backdrop`
+ */
+declare const dialogBackdropVariants: (props?: {
+    visible?: boolean;
+}) => string;
+/**
+ * CVA variants for the dialog panel container.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`,
+ *         `--shadow-xl`, `--radius-overlay`
+ */
+declare const dialogPanelVariants: (props?: {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    visible?: boolean;
+}) => string;
+/** Type helper for dialog panel variant props. */
+type DialogPanelVariantProps = VariantProps<typeof dialogPanelVariants>;
+/**
+ * CVA variants for the dialog title.
+ *
+ * @tokens `--color-foreground`
+ */
+declare const dialogTitleVariants: () => string;
+/**
+ * CVA variants for the dialog content area.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const dialogContentVariants: () => string;
+/**
+ * CVA variants for the dialog actions area.
+ */
+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 };

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

@@ -0,0 +1,110 @@
+import * as i0 from '@angular/core';
+import { Signal, ElementRef, InputSignal, ModelSignal, OutputEmitterRef } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+
+/** Switch size variants. */
+type SwitchSize = 'sm' | 'md' | 'lg';
+/** Switch color variants. */
+type SwitchVariant = 'primary' | 'accent' | 'warn';
+/**
+ * CVA variants for the switch track (pill-shaped container).
+ *
+ * Uses `peer` selectors to style based on native input state:
+ * - `peer-checked:` for on state
+ * - `peer-focus-visible:` for keyboard focus
+ * - `peer-disabled:` for disabled state
+ *
+ * @tokens `--color-primary`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-hover`,
+ *         `--color-muted`, `--color-muted-hover`,
+ *         `--color-disabled`, `--color-ring`, `--radius-pill`
+ */
+declare const switchTrackVariants: (props?: {
+    variant?: SwitchVariant;
+    size?: SwitchSize;
+}) => string;
+/** Size-based classes for the sliding thumb. */
+declare const SWITCH_THUMB_SIZES: Record<SwitchSize, string>;
+/** Size-based translate classes applied when the switch is checked. */
+declare const SWITCH_THUMB_TRANSLATE: Record<SwitchSize, string>;
+/** Size-based classes for the label content. */
+declare const SWITCH_LABEL_SIZES: Record<SwitchSize, string>;
+
+/** Event emitted when switch state changes. */
+interface SwitchChange {
+    checked: boolean;
+    source: ComSwitch;
+}
+/**
+ * Toggle switch component with full accessibility support.
+ *
+ * Uses a native `<input type="checkbox" role="switch">` for built-in keyboard
+ * handling, `:checked` pseudo-class, and screen reader support.
+ *
+ * Implements `ControlValueAccessor` for Reactive Forms integration via
+ * `NgControl` injection pattern (no `NG_VALUE_ACCESSOR` provider).
+ *
+ * @tokens `--color-primary`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-hover`,
+ *         `--color-muted`, `--color-muted-hover`,
+ *         `--color-background`, `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-ring`, `--radius-pill`
+ *
+ * @example Basic usage
+ * ```html
+ * <com-switch [(checked)]="darkMode">Dark mode</com-switch>
+ * ```
+ *
+ * @example With reactive forms
+ * ```html
+ * <com-switch formControlName="notifications">Push notifications</com-switch>
+ * ```
+ *
+ * @example Variants and sizes
+ * ```html
+ * <com-switch variant="accent" size="lg">Large accent switch</com-switch>
+ * <com-switch variant="warn" size="sm">Small warning switch</com-switch>
+ * ```
+ */
+declare class ComSwitch implements ControlValueAccessor {
+    /** Optional NgControl for reactive forms integration. */
+    readonly ngControl: NgControl | null;
+    /** Reference to the native input element. */
+    readonly inputRef: Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** Unique ID for this switch instance. */
+    private readonly uniqueId;
+    readonly size: InputSignal<SwitchSize>;
+    readonly variant: InputSignal<SwitchVariant>;
+    readonly checked: ModelSignal<boolean>;
+    readonly disabled: ModelSignal<boolean>;
+    readonly value: InputSignal<string | undefined>;
+    readonly name: InputSignal<string | undefined>;
+    readonly id: InputSignal<string | undefined>;
+    readonly ariaLabel: InputSignal<string | null>;
+    readonly ariaLabelledby: InputSignal<string | null>;
+    readonly ariaDescribedby: InputSignal<string | null>;
+    readonly changed: OutputEmitterRef<SwitchChange>;
+    readonly inputId: Signal<string>;
+    protected readonly trackClasses: Signal<string>;
+    protected readonly thumbClasses: Signal<string>;
+    protected readonly labelClasses: Signal<string>;
+    private onChange;
+    protected onTouched: () => void;
+    constructor();
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onInputChange(event: Event): void;
+    /** Focuses this switch's input element. */
+    focus(): void;
+    /** Toggles the switch state programmatically. */
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSwitch, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComSwitch, "com-switch", ["comSwitch"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "disabled": "disabledChange"; "changed": "changed"; }, never, ["*"], true, never>;
+}
+
+export { ComSwitch, SWITCH_LABEL_SIZES, SWITCH_THUMB_SIZES, SWITCH_THUMB_TRANSLATE, switchTrackVariants };
+export type { SwitchChange, SwitchSize, SwitchVariant };