ngx-com 0.0.19 → 0.0.21

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 };

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 };