ngx-com 0.0.19 → 0.0.20

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

@@ -0,0 +1,377 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, InputSignal, Signal, InputSignalWithTransform, TrackByFunction } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Structural directive that captures the template for a header cell.
+ *
+ * Use with the star syntax inside a `comColumnDef` container.
+ *
+ * @example
+ * ```html
+ * <ng-container comColumnDef="name">
+ *   <th *comHeaderCellDef>Name</th>
+ *   <td *comCellDef="let row">{{ row.name }}</td>
+ * </ng-container>
+ * ```
+ */
+declare class ComHeaderCellDef {
+    readonly templateRef: TemplateRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComHeaderCellDef, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComHeaderCellDef, "[comHeaderCellDef]", never, {}, {}, never, never, true, never>;
+}
+
+/** Template context for body cell definitions. */
+interface CellDefContext<T> {
+    $implicit: T;
+    index: number;
+}
+
+/**
+ * Structural directive that captures the template for a body cell.
+ *
+ * Use with the star syntax inside a `comColumnDef` container.
+ *
+ * @example
+ * ```html
+ * <ng-container comColumnDef="name">
+ *   <th *comHeaderCellDef>Name</th>
+ *   <td *comCellDef="let row">{{ row.name }}</td>
+ * </ng-container>
+ * ```
+ */
+declare class ComCellDef<T = unknown> {
+    readonly templateRef: TemplateRef<CellDefContext<T>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComCellDef<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCellDef<any>, "[comCellDef]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Structural directive that captures the template for a footer cell.
+ *
+ * Use with the star syntax inside a `comColumnDef` container.
+ *
+ * @example
+ * ```html
+ * <ng-container comColumnDef="amount">
+ *   <th *comHeaderCellDef>Amount</th>
+ *   <td *comCellDef="let row">{{ row.amount | currency }}</td>
+ *   <td *comFooterCellDef>{{ total() | currency }}</td>
+ * </ng-container>
+ * ```
+ */
+declare class ComFooterCellDef {
+    readonly templateRef: TemplateRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComFooterCellDef, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComFooterCellDef, "[comFooterCellDef]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Defines a single column in a `com-table`.
+ *
+ * Contains a header cell template, a body cell template, and an optional footer cell template.
+ *
+ * @example
+ * ```html
+ * <ng-container comColumnDef="name">
+ *   <th *comHeaderCellDef>Name</th>
+ *   <td *comCellDef="let row">{{ row.name }}</td>
+ * </ng-container>
+ * ```
+ */
+declare class ComColumnDef {
+    /** The column name — used to match header/row column lists. */
+    readonly name: InputSignal<string>;
+    /** @internal Header cell template for this column. */
+    readonly headerCellDef: Signal<ComHeaderCellDef | undefined>;
+    /** @internal Body cell template for this column. */
+    readonly cellDef: Signal<ComCellDef | undefined>;
+    /** @internal Optional footer cell template for this column. */
+    readonly footerCellDef: Signal<ComFooterCellDef | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComColumnDef, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComColumnDef, "[comColumnDef]", ["comColumnDef"], { "name": { "alias": "comColumnDef"; "required": true; "isSignal": true; }; }, {}, ["headerCellDef", "cellDef", "footerCellDef"], never, true, never>;
+}
+
+/**
+ * Defines which columns appear in the header row and their order.
+ *
+ * @example
+ * ```html
+ * <tr comHeaderRowDef="['name', 'email', 'role']"></tr>
+ * ```
+ *
+ * @example Sticky header row
+ * ```html
+ * <tr comHeaderRowDef="['name', 'email']" comHeaderRowDefSticky></tr>
+ * ```
+ */
+declare class ComHeaderRowDef {
+    /** Ordered list of column names to display. */
+    readonly columns: InputSignal<string[]>;
+    /** Makes this header row sticky (alternative to table-level `stickyHeader`). */
+    readonly sticky: InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComHeaderRowDef, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComHeaderRowDef, "[comHeaderRowDef]", never, { "columns": { "alias": "comHeaderRowDef"; "required": true; "isSignal": true; }; "sticky": { "alias": "comHeaderRowDefSticky"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Defines which columns appear in each body row and their order.
+ *
+ * @example
+ * ```html
+ * <tr comRowDef [comRowDefColumns]="['name', 'email', 'role']"></tr>
+ * ```
+ */
+declare class ComRowDef {
+    /** Ordered list of column names to display per body row. */
+    readonly columns: InputSignal<string[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComRowDef, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComRowDef, "[comRowDef]", never, { "columns": { "alias": "comRowDefColumns"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Defines which columns appear in the footer row and their order.
+ *
+ * @example
+ * ```html
+ * <tr comFooterRowDef="['description', 'amount']"></tr>
+ * ```
+ */
+declare class ComFooterRowDef {
+    /** Ordered list of column names in the footer. */
+    readonly columns: InputSignal<string[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComFooterRowDef, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComFooterRowDef, "[comFooterRowDef]", never, { "columns": { "alias": "comFooterRowDef"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Structural directive for the empty-state row shown when the data source is empty.
+ *
+ * Place inside `com-table`. The template receives the column count for colspan.
+ *
+ * @example
+ * ```html
+ * <com-table [dataSource]="data()">
+ *   <!-- column defs... -->
+ *
+ *   <ng-template comNoDataRow>
+ *     <td [attr.colspan]="displayedColumns().length" class="text-center py-8">
+ *       No results found.
+ *     </td>
+ *   </ng-template>
+ * </com-table>
+ * ```
+ */
+declare class ComNoDataRow {
+    readonly templateRef: TemplateRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComNoDataRow, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComNoDataRow, "[comNoDataRow]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Abstract data source for ComTable.
+ *
+ * Implement `connect()` to provide a signal of data, and `disconnect()` to clean up.
+ * The table calls `connect()` on init and `disconnect()` on destroy.
+ *
+ * @example Signal-based data source
+ * ```typescript
+ * class MyDataSource extends ComDataSource<User> {
+ *   private readonly data = signal<User[]>([]);
+ *
+ *   connect(): Signal<readonly User[]> {
+ *     return this.data.asReadonly();
+ *   }
+ *
+ *   disconnect(): void {
+ *     // cleanup if needed
+ *   }
+ *
+ *   setData(users: User[]): void {
+ *     this.data.set(users);
+ *   }
+ * }
+ * ```
+ */
+declare abstract class ComDataSource<T> {
+    /** Returns a signal of the current data set. Called once when the table initializes. */
+    abstract connect(): Signal<readonly T[]>;
+    /** Cleanup resources. Called when the table is destroyed. */
+    abstract disconnect(): void;
+}
+/**
+ * Simple array-backed data source.
+ *
+ * Wraps a plain array in a writable signal so it can be used with ComTable's DataSource API.
+ */
+declare class ComArrayDataSource<T> extends ComDataSource<T> {
+    private readonly data;
+    constructor(initialData?: T[]);
+    connect(): Signal<readonly T[]>;
+    disconnect(): void;
+    /** Replace the entire data set. */
+    setData(data: T[]): void;
+}
+/**
+ * Type guard to check if a value is a ComDataSource instance.
+ */
+declare function isDataSource<T>(value: unknown): value is ComDataSource<T>;
+/** The types that ComTable accepts for its dataSource input. */
+type ComTableDataSourceInput<T> = T[] | ComDataSource<T>;
+
+type TableVariant = 'default' | 'striped';
+type TableDensity = 'compact' | 'default' | 'comfortable';
+/**
+ * CVA variants for the table container wrapper.
+ */
+declare const tableContainerVariants: (props?: Record<string, never>) => string;
+type TableContainerVariants = VariantProps<typeof tableContainerVariants>;
+/**
+ * CVA variants for the `<table>` element.
+ *
+ * @tokens `--color-foreground`
+ */
+declare const tableVariants: (props?: Record<string, never>) => string;
+type TableVariants = VariantProps<typeof tableVariants>;
+/**
+ * CVA variants for the `<thead>` element.
+ *
+ * @tokens `--color-background`
+ */
+declare const tableHeaderVariants: (props?: {
+    sticky?: boolean;
+}) => string;
+type TableHeaderVariants = VariantProps<typeof tableHeaderVariants>;
+/**
+ * CVA variants for `<th>` header cells.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const tableHeaderCellVariants: (props?: {
+    density?: TableDensity;
+}) => string;
+type TableHeaderCellVariants = VariantProps<typeof tableHeaderCellVariants>;
+/**
+ * CVA variants for `<tbody> <tr>` rows.
+ *
+ * @tokens `--color-border-subtle`, `--color-muted`, `--color-muted-hover`
+ */
+declare const tableRowVariants: (props?: {
+    variant?: TableVariant;
+}) => string;
+type TableRowVariants = VariantProps<typeof tableRowVariants>;
+/**
+ * CVA variants for `<td>` body cells.
+ */
+declare const tableBodyCellVariants: (props?: {
+    density?: TableDensity;
+}) => string;
+type TableBodyCellVariants = VariantProps<typeof tableBodyCellVariants>;
+/**
+ * CVA variants for `<tfoot> <td>` footer cells.
+ *
+ * @tokens `--color-foreground`, `--color-border`
+ */
+declare const tableFooterCellVariants: (props?: {
+    density?: TableDensity;
+}) => string;
+type TableFooterCellVariants = VariantProps<typeof tableFooterCellVariants>;
+
+/**
+ * Declarative data table component using native HTML `<table>` semantics.
+ *
+ * Define columns via `comColumnDef` with `*comHeaderCellDef` and `*comCellDef`,
+ * then declare row structure via `comHeaderRowDef` and `comRowDef`.
+ *
+ * Accepts either a plain `T[]` or a `ComDataSource<T>` for the data source.
+ *
+ * @tokens `--color-background`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`,
+ *         `--color-muted-hover`, `--color-border`, `--color-border-subtle`
+ *
+ * @example Basic table
+ * ```html
+ * <com-table [dataSource]="users()">
+ *   <ng-container comColumnDef="name">
+ *     <th *comHeaderCellDef>Name</th>
+ *     <td *comCellDef="let row">{{ row.name }}</td>
+ *   </ng-container>
+ *
+ *   <ng-container comColumnDef="email">
+ *     <th *comHeaderCellDef>Email</th>
+ *     <td *comCellDef="let row">{{ row.email }}</td>
+ *   </ng-container>
+ *
+ *   <tr comHeaderRowDef="['name', 'email']"></tr>
+ *   <tr comRowDef [comRowDefColumns]="['name', 'email']"></tr>
+ * </com-table>
+ * ```
+ *
+ * @example With DataSource
+ * ```typescript
+ * class UserDataSource extends ComDataSource<User> {
+ *   private data = signal<User[]>([]);
+ *   connect() { return this.data.asReadonly(); }
+ *   disconnect() {}
+ *   setData(users: User[]) { this.data.set(users); }
+ * }
+ * ```
+ * ```html
+ * <com-table [dataSource]="userDataSource">
+ *   ...
+ * </com-table>
+ * ```
+ */
+declare class ComTable<T> {
+    private readonly destroyRef;
+    /** The data to render — accepts a plain array or a ComDataSource. */
+    readonly dataSource: InputSignal<ComTableDataSourceInput<T>>;
+    /** Track function for `@for`. Defaults to tracking by index. */
+    readonly trackByFn: InputSignal<TrackByFunction<T>>;
+    /** Visual treatment of body rows. */
+    readonly variant: InputSignal<TableVariant>;
+    /** Row height / cell padding. */
+    readonly density: InputSignal<TableDensity>;
+    /** Whether the header row sticks on scroll. */
+    readonly stickyHeader: InputSignalWithTransform<boolean, unknown>;
+    /** Shows a loading overlay with spinner. */
+    readonly loading: InputSignalWithTransform<boolean, unknown>;
+    /** Accessible label for the table element. */
+    readonly ariaLabel: InputSignal<string | undefined>;
+    /** @internal All column definitions projected into the table. */
+    readonly columnDefs: Signal<readonly ComColumnDef[]>;
+    /** @internal Header row definition. */
+    readonly headerRowDef: Signal<ComHeaderRowDef | undefined>;
+    /** @internal Body row definition. */
+    readonly rowDef: Signal<ComRowDef | undefined>;
+    /** @internal Optional footer row definition. */
+    readonly footerRowDef: Signal<ComFooterRowDef | undefined>;
+    /** @internal Optional no-data row template. */
+    readonly noDataRow: Signal<ComNoDataRow | undefined>;
+    /** @internal Map of column name → column definition for O(1) lookup. */
+    protected readonly columnDefMap: Signal<Map<string, ComColumnDef>>;
+    /** @internal Resolved render data — handles both array and DataSource inputs. */
+    private readonly dataSourceSignal;
+    /** @internal The actual data array to render. */
+    readonly renderData: Signal<readonly T[]>;
+    /** @internal Header column names. */
+    protected readonly headerColumns: Signal<string[]>;
+    /** @internal Body column names. */
+    protected readonly bodyColumns: Signal<string[]>;
+    /** @internal Footer column names. */
+    protected readonly footerColumns: Signal<string[]>;
+    /** @internal Whether the header should be sticky. */
+    private readonly isSticky;
+    protected readonly containerClasses: Signal<string>;
+    protected readonly tableClasses: Signal<string>;
+    protected readonly theadClasses: Signal<string>;
+    protected readonly thClasses: Signal<string>;
+    protected readonly trClasses: Signal<string>;
+    protected readonly tdClasses: Signal<string>;
+    protected readonly tfootTdClasses: Signal<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComTable<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComTable<any>, "com-table", ["comTable"], { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "trackByFn": { "alias": "trackByFn"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["columnDefs", "headerRowDef", "rowDef", "footerRowDef", "noDataRow"], never, true, never>;
+}
+
+export { ComArrayDataSource, ComCellDef, ComColumnDef, ComDataSource, ComFooterCellDef, ComFooterRowDef, ComHeaderCellDef, ComHeaderRowDef, ComNoDataRow, ComRowDef, ComTable, isDataSource, tableBodyCellVariants, tableContainerVariants, tableFooterCellVariants, tableHeaderCellVariants, tableHeaderVariants, tableRowVariants, tableVariants };
+export type { CellDefContext, ComTableDataSourceInput, TableBodyCellVariants, TableContainerVariants, TableDensity, TableFooterCellVariants, TableHeaderCellVariants, TableHeaderVariants, TableRowVariants, TableVariant, TableVariants };

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

@@ -0,0 +1,217 @@
+import { Observable } from 'rxjs';
+import * as i0 from '@angular/core';
+import { TemplateRef, InjectionToken, Provider } from '@angular/core';
+
+/**
+ * Toast notification type.
+ */
+type ComToastType = 'success' | 'warn' | 'error' | 'info';
+/**
+ * Toast container position on screen.
+ */
+type ComToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+/**
+ * Reason a toast was dismissed.
+ */
+type ComToastDismissReason = 'auto' | 'manual' | 'action' | 'limit';
+/**
+ * Event emitted when a toast is dismissed.
+ */
+interface ComToastDismissEvent {
+    /** The reason the toast was dismissed. */
+    reason: ComToastDismissReason;
+}
+/**
+ * Global toast configuration. Provide via `provideComToastConfig()`.
+ */
+interface ComToastConfig {
+    /** Screen position of the toast container. Default: `'bottom-right'` */
+    position?: ComToastPosition;
+    /** Auto-dismiss duration in milliseconds. `0` = no auto-dismiss. Default: `5000` */
+    duration?: number;
+    /** Maximum visible toasts. Default: `5` */
+    maxVisible?: number;
+    /** Pause auto-dismiss timer on hover. Default: `true` */
+    pauseOnHover?: boolean;
+    /** Show progress bar for auto-dismissing toasts. Default: `true` */
+    showProgress?: boolean;
+    /** Show close button. Default: `true` */
+    showClose?: boolean;
+}
+/**
+ * Data for an individual toast notification.
+ */
+interface ComToastData {
+    /** Toast type. Default: `'info'` */
+    type?: ComToastType;
+    /** Optional title displayed above the message. */
+    title?: string;
+    /** The toast message. */
+    message: string;
+    /** Optional action button. */
+    action?: {
+        label: string;
+    };
+    /** Lucide icon name override. */
+    icon?: string;
+    /** Per-toast auto-dismiss duration override (ms). */
+    duration?: number;
+    /** Per-toast progress bar visibility override. */
+    showProgress?: boolean;
+    /** Per-toast close button visibility override. */
+    showClose?: boolean;
+    /** Custom template for the toast content. */
+    customTemplate?: TemplateRef<ComToastTemplateContext>;
+}
+/**
+ * Context provided to custom toast templates.
+ */
+interface ComToastTemplateContext {
+    /** The toast data. */
+    $implicit: ComToastData;
+    /** Function to dismiss the toast. */
+    dismiss: () => void;
+    /** Function to trigger the action. */
+    action: () => void;
+}
+
+/**
+ * Reference to an active toast notification.
+ * Returned by `ComToastService` methods for programmatic control.
+ */
+declare class ComToastRef {
+    private readonly dismissSubject;
+    private readonly actionSubject;
+    private readonly dismissFn;
+    private dismissed;
+    constructor(dismissFn: () => void);
+    /** Programmatically dismiss the toast. */
+    dismiss(): void;
+    /** Emits once when the toast is dismissed (for any reason). */
+    afterDismissed(): Observable<ComToastDismissEvent>;
+    /** Emits when the action button is clicked. */
+    afterAction(): Observable<void>;
+    /** @internal */
+    _notifyDismissed(event: ComToastDismissEvent): void;
+    /** @internal */
+    _notifyAction(): void;
+}
+
+/**
+ * Service for creating toast notifications imperatively.
+ *
+ * @example
+ * ```typescript
+ * const toast = inject(ComToastService);
+ * toast.success('File uploaded successfully.');
+ * toast.error('Failed to save.', 'Error');
+ *
+ * const ref = toast.show({ type: 'info', message: 'Item deleted.', action: { label: 'Undo' } });
+ * ref.afterAction().subscribe(() => undoDelete());
+ * ```
+ */
+declare class ComToastService {
+    private readonly overlay;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly platformId;
+    private readonly document;
+    private readonly globalConfig;
+    private overlayRef;
+    private readonly toasts;
+    private readonly position;
+    private readonly timers;
+    private readonly refs;
+    private readonly animationFallbacks;
+    private readonly dismissReasons;
+    private rafHandle;
+    private readonly config;
+    constructor();
+    /**
+     * Show a toast notification with full configuration.
+     */
+    show(data: ComToastData): ComToastRef;
+    /** Show a success toast. */
+    success(message: string, title?: string): ComToastRef;
+    /** Show a warning toast. */
+    warn(message: string, title?: string): ComToastRef;
+    /** Show an error toast. */
+    error(message: string, title?: string): ComToastRef;
+    /** Show an info toast. */
+    info(message: string, title?: string): ComToastRef;
+    /** Dismiss all active toasts. */
+    dismissAll(): void;
+    private showByType;
+    private ensureContainer;
+    private buildPositionStrategy;
+    private dismiss;
+    private removeToast;
+    private handleAction;
+    private dismissLatest;
+    private enforceMaxVisible;
+    private startTimer;
+    private ensureRafLoop;
+    private pauseTimer;
+    private resumeTimer;
+    private clearTimer;
+    private now;
+    private updateToast;
+    private disposeOverlay;
+    private dispose;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ComToastService>;
+}
+
+/**
+ * Injection token for global toast configuration.
+ */
+declare const COM_TOAST_CONFIG: InjectionToken<ComToastConfig>;
+/**
+ * Provides global toast configuration.
+ *
+ * @example
+ * ```typescript
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideComToastConfig({ position: 'top-center', duration: 3000 }),
+ *   ],
+ * });
+ * ```
+ */
+declare function provideComToastConfig(config: ComToastConfig): Provider;
+
+/**
+ * CVA variants for an individual toast card.
+ *
+ * @tokens `--color-success`, `--color-success-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`,
+ *         `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-border`, `--shadow-lg`, `--radius-card`
+ */
+declare const toastVariants: (props?: {
+    type?: ComToastType;
+}) => string;
+/**
+ * CVA variants for the toast container positioning.
+ */
+declare const toastContainerVariants: (props?: {
+    position?: ComToastPosition;
+}) => string;
+/**
+ * CVA variants for the toast progress bar.
+ */
+declare const toastProgressVariants: (props?: {
+    type?: ComToastType;
+}) => string;
+/**
+ * CVA variants for the toast close button.
+ *
+ * @tokens `--color-ring`, `--radius-card`
+ */
+declare const toastCloseButtonVariants: (props?: {
+    type?: ComToastType;
+}) => string;
+
+export { COM_TOAST_CONFIG, ComToastRef, ComToastService, provideComToastConfig, toastCloseButtonVariants, toastContainerVariants, toastProgressVariants, toastVariants };
+export type { ComToastConfig, ComToastData, ComToastDismissEvent, ComToastDismissReason, ComToastPosition, ComToastTemplateContext, ComToastType };