ngx-com 0.1.1 → 0.1.3

package/package.json

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

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

@@ -504,8 +504,8 @@ declare class ComCalendar<D> {
     private readonly monthViews;
     /** The date to display and navigate from */
     readonly activeDate: InputSignal<D | undefined>;
-    /** The currently selected date or date range */
-    readonly selected: InputSignal<D | DateRange<D> | null>;
+    /** The currently selected date, date range, or array of dates (multi-selection) */
+    readonly selected: InputSignal<D | D[] | DateRange<D> | null>;
     /** Minimum selectable date */
     readonly minDate: InputSignal<D | null>;
     /** Maximum selectable date */
@@ -635,8 +635,8 @@ declare abstract class CalendarViewBase<D> {
     protected readonly dateAdapter: DateAdapter<D>;
     /** The date to display and navigate from */
     readonly activeDate: InputSignal<D>;
-    /** The currently selected date or date range */
-    readonly selected: InputSignal<D | DateRange<D> | null>;
+    /** The currently selected date, date range, or array of dates (multi-selection) */
+    readonly selected: InputSignal<D | D[] | DateRange<D> | null>;
     /** Minimum selectable date */
     readonly minDate: InputSignal<D | null>;
     /** Maximum selectable date */
@@ -711,7 +711,7 @@ declare abstract class CalendarViewBase<D> {
     /**
      * Type guard to check if a value is a DateRange.
      */
-    protected isDateRange(value: D | DateRange<D>): value is DateRange<D>;
+    protected isDateRange(value: D | D[] | DateRange<D>): value is DateRange<D>;
     /**
      * Handles cell selection events.
      */

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

@@ -236,6 +236,16 @@ declare class ComDatepicker<D> implements ControlValueAccessor, FormFieldControl
     readonly showSeconds: InputSignal<boolean>;
     /** Step interval for minutes in the time picker. */
     readonly minuteStep: InputSignal<number>;
+    /**
+     * When true, date/time selections while the panel is open update only the visual state.
+     * The value is committed (emitted via `dateChange`, propagated to forms) only when
+     * the user presses "Done". Closing via Escape or backdrop click reverts to the
+     * pre-open value without emitting.
+     *
+     * All in-panel actions (date selection, time change, today, footer clear) are buffered.
+     * The trigger clear button (panel closed) always commits immediately.
+     */
+    readonly commitOnClose: InputSignal<boolean>;
     /** Emitted when a date is selected. */
     readonly dateChange: OutputEmitterRef<D | null>;
     /** Emitted when the panel opens. */
@@ -248,6 +258,11 @@ declare class ComDatepicker<D> implements ControlValueAccessor, FormFieldControl
     readonly internalValue: WritableSignal<D | null>;
     /** Calendar active date for navigation. Recomputes when value or startAt changes; user navigation overrides via .set(). */
     readonly calendarActiveDate: WritableSignal<D>;
+    /**
+     * Snapshot of the value when the panel was opened.
+     * Used by `commitOnClose` to revert on Escape/backdrop close.
+     */
+    private readonly committedValue;
     /** Live announcements for screen readers. */
     readonly liveAnnouncement: WritableSignal<string>;
     /** Whether the input is focused (not panel). */
@@ -305,7 +320,7 @@ declare class ComDatepicker<D> implements ControlValueAccessor, FormFieldControl
     readonly timeValue: Signal<ComTimeValue | null>;
     /** Effective display format — switches to dateTime when time picker is shown. */
     readonly effectiveDateFormat: Signal<DateFormatPreset>;
-    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    /** Whether the panel should stay open (keepOpen, time picker shown, or commitOnClose). */
     readonly effectiveKeepOpen: Signal<boolean>;
     private onChange;
     private onTouched;
@@ -320,13 +335,15 @@ declare class ComDatepicker<D> implements ControlValueAccessor, FormFieldControl
     registerOnValidatorChange(fn: () => void): void;
     /** Opens the datepicker panel. */
     open(): void;
-    /** Closes the datepicker panel. */
+    /** Closes the datepicker panel. Reverts buffered changes when `commitOnClose` is active. */
     close(): void;
+    /** Commits the buffered value and closes the panel. Called by the Done button. */
+    protected commitAndClose(): void;
     /** Toggles the datepicker panel. */
     toggle(): void;
-    /** Clears the selected date. */
+    /** Clears the selected date. Buffered when commitOnClose is active and panel is open. */
     clear(event?: Event): void;
-    /** Selects today's date. */
+    /** Selects today's date. Buffered when commitOnClose is active and panel is open. */
     selectToday(): void;
     protected onInputFocus(): void;
     protected onTriggerClick(): void;
@@ -360,7 +377,7 @@ declare class ComDatepicker<D> implements ControlValueAccessor, FormFieldControl
     private isDateValid;
     private announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComDatepicker<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComDatepicker<any>, "com-datepicker", ["comDatepicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDatepicker<any>, "com-datepicker", ["comDatepicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "commitOnClose": { "alias": "commitOnClose"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /**
@@ -473,6 +490,16 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, FormFieldCo
     readonly showSeconds: InputSignal<boolean>;
     /** Step interval for minutes in the time pickers. */
     readonly minuteStep: InputSignal<number>;
+    /**
+     * When true, range/time selections while the panel is open update only the visual state.
+     * The value is committed (emitted via `rangeChange`, propagated to forms) only when
+     * the user presses "Done". Closing via Escape or backdrop click reverts to the
+     * pre-open value without emitting.
+     *
+     * All in-panel actions (range selection, time change, today, footer clear) are buffered.
+     * The trigger clear button (panel closed) always commits immediately.
+     */
+    readonly commitOnClose: InputSignal<boolean>;
     /** Emitted when a complete range is selected. */
     readonly rangeChange: OutputEmitterRef<DateRangeValue<D> | null>;
     /** Emitted when the panel opens. */
@@ -487,6 +514,11 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, FormFieldCo
     readonly internalValue: WritableSignal<DateRangeValue<D> | null>;
     /** Calendar active date for navigation. Recomputes when value or startAt changes; user navigation overrides via .set(). */
     readonly calendarActiveDate: WritableSignal<D>;
+    /**
+     * Snapshot of the value when the panel was opened.
+     * Used by `commitOnClose` to revert on Escape/backdrop close.
+     */
+    private readonly committedValue;
     /** Live announcements for screen readers. */
     readonly liveAnnouncement: WritableSignal<string>;
     /** Whether any input is focused. */
@@ -555,7 +587,7 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, FormFieldCo
     readonly endTimeValue: Signal<ComTimeValue | null>;
     /** Effective display format — switches to dateTime when time picker is shown. */
     readonly effectiveDateFormat: Signal<DateFormatPreset>;
-    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    /** Whether the panel should stay open (keepOpen, time picker shown, or commitOnClose). */
     readonly effectiveKeepOpen: Signal<boolean>;
     private onChange;
     private onTouched;
@@ -570,13 +602,15 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, FormFieldCo
     registerOnValidatorChange(fn: () => void): void;
     /** Opens the datepicker panel. */
     open(): void;
-    /** Closes the datepicker panel. */
+    /** Closes the datepicker panel. Reverts buffered changes when `commitOnClose` is active. */
     close(): void;
+    /** Commits the buffered value and closes the panel. Called by the Done button. */
+    protected commitAndClose(): void;
     /** Toggles the datepicker panel. */
     toggle(): void;
-    /** Clears the selected date range. */
+    /** Clears the selected date range. Buffered when commitOnClose is active and panel is open. */
     clear(event?: Event): void;
-    /** Selects today's date as the start date. */
+    /** Selects today's date as the start date. Buffered when commitOnClose is active and panel is open. */
     selectToday(): void;
     protected onTriggerClick(): void;
     protected onTriggerKeydown(event: KeyboardEvent): void;
@@ -616,7 +650,7 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, FormFieldCo
     private formatDate;
     private announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComDateRangePicker<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComDateRangePicker<any>, "com-date-range-picker", ["comDateRangePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "startAriaLabel": { "alias": "startAriaLabel"; "required": false; "isSignal": true; }; "endAriaLabel": { "alias": "endAriaLabel"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "rangeChange": "rangeChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDateRangePicker<any>, "com-date-range-picker", ["comDateRangePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "startAriaLabel": { "alias": "startAriaLabel"; "required": false; "isSignal": true; }; "endAriaLabel": { "alias": "endAriaLabel"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "commitOnClose": { "alias": "commitOnClose"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "rangeChange": "rangeChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 export { ComDateRangePicker, ComDatepicker, createDateRangeValue, datepickerClearVariants, datepickerDisabledVariants, datepickerFooterButtonVariants, datepickerFooterVariants, datepickerIconVariants, datepickerInputVariants, datepickerPanelVariants, datepickerRangeSeparatorVariants, datepickerTriggerVariants, generateDatepickerId };

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

@@ -294,6 +294,30 @@ declare class ComDropdownTagTpl<T> {
     static ɵdir: i0.ɵɵDirectiveDeclaration<ComDropdownTagTpl<any>, "ng-template[comDropdownTag]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Directive to mark a template as the custom loading indicator template.
+ *
+ * @tokens none
+ *
+ * @example
+ * ```html
+ * <com-dropdown [options]="users()" [loading]="isLoading()">
+ *   <ng-template comDropdownLoading>
+ *     <div class="flex items-center gap-2 p-3">
+ *       <com-spinner size="xs" color="primary" />
+ *       <span class="text-sm text-muted-foreground">Fetching more results...</span>
+ *     </div>
+ *   </ng-template>
+ * </com-dropdown>
+ * ```
+ */
+declare class ComDropdownLoadingTpl {
+    /** Reference to the template. */
+    readonly templateRef: TemplateRef<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComDropdownLoadingTpl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComDropdownLoadingTpl, "ng-template[comDropdownLoading]", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * Variant type for dropdown trigger appearance.
  */
@@ -424,6 +448,15 @@ declare const dropdownChevronVariants: (props?: {
     open?: boolean;
 }) => string;
 type DropdownChevronVariants = VariantProps<typeof dropdownChevronVariants>;
+/**
+ * CVA variants for the loading indicator container.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const dropdownLoadingVariants: (props?: {
+    size?: DropdownSize;
+}) => string;
+type DropdownLoadingVariants = VariantProps<typeof dropdownLoadingVariants>;
 
 /**
  * Reusable dropdown/select component with full accessibility support.
@@ -478,6 +511,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     protected readonly groupTemplate: Signal<ComDropdownGroupTpl | undefined>;
     /** Content query for custom tag template. */
     protected readonly tagTemplate: Signal<ComDropdownTagTpl<T> | undefined>;
+    /** Content query for custom loading template. */
+    protected readonly loadingTemplate: Signal<ComDropdownLoadingTpl | undefined>;
     /** Overlay reference. */
     private overlayRef;
     /** Unique ID for the dropdown. */
@@ -532,6 +567,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     readonly maxVisibleTags: InputSignal<number | null>;
     /** Custom error state matcher for determining when to show errors. */
     readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    /** Whether the dropdown is currently loading data. */
+    readonly loading: InputSignal<boolean>;
     readonly touched: ModelSignal<boolean>;
     readonly invalid: InputSignal<boolean>;
     readonly sfErrors: InputSignal<readonly unknown[]>;
@@ -541,6 +578,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     readonly opened: OutputEmitterRef<void>;
     /** Emitted when panel closes. */
     readonly closed: OutputEmitterRef<void>;
+    /** Emitted when user scrolls near the bottom of the option list. */
+    readonly loadMore: OutputEmitterRef<void>;
     /** Whether the panel is open. */
     readonly isOpen: WritableSignal<boolean>;
     /** Whether the trigger button is focused. */
@@ -553,6 +592,12 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     readonly internalValue: WritableSignal<T | T[] | null>;
     /** Live announcements for screen readers. */
     readonly liveAnnouncement: WritableSignal<string>;
+    /** Flag to prevent duplicate loadMore emissions per scroll-to-bottom. */
+    private loadMoreEmitted;
+    /** Subscription for virtual scroll elementScrolled. */
+    private scrollSubscription;
+    /** Throttled handler for standard scroll events. */
+    private throttledScrollHandler;
     /** IDs for aria-describedby (set by form-field). */
     private readonly _describedByIds;
     /** Form field appearance (set by form-field). */
@@ -612,6 +657,8 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     readonly clearClasses: Signal<string>;
     /** Computed overflow badge classes. */
     readonly overflowBadgeClasses: Signal<string>;
+    /** Computed loading container classes. */
+    readonly loadingContainerClasses: Signal<string>;
     private onChange;
     private onTouched;
     constructor();
@@ -679,8 +726,12 @@ declare class ComDropdown<T> implements ControlValueAccessor, FormFieldControl<T
     private flattenGroupedOptions;
     private typeAhead;
     private announce;
+    /** Sets up scroll detection for the loadMore output. SSR-safe: only called from user interaction. */
+    private setupScrollDetection;
+    /** Cleans up scroll detection listeners. */
+    private cleanupScrollDetection;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComDropdown<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComDropdown<any>, "com-dropdown", ["comDropdown"], { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "filterWith": { "alias": "filterWith"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "searchDebounceMs": { "alias": "searchDebounceMs"; "required": false; "isSignal": true; }; "virtualScrollThreshold": { "alias": "virtualScrollThreshold"; "required": false; "isSignal": true; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; "isSignal": true; }; "maxVisibleTags": { "alias": "maxVisibleTags"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; }, ["optionTemplate", "selectedTemplate", "emptyTemplate", "groupTemplate", "tagTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDropdown<any>, "com-dropdown", ["comDropdown"], { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "filterWith": { "alias": "filterWith"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "searchDebounceMs": { "alias": "searchDebounceMs"; "required": false; "isSignal": true; }; "virtualScrollThreshold": { "alias": "virtualScrollThreshold"; "required": false; "isSignal": true; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; "isSignal": true; }; "maxVisibleTags": { "alias": "maxVisibleTags"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; "searchChange": "searchChange"; "opened": "opened"; "closed": "closed"; "loadMore": "loadMore"; }, ["optionTemplate", "selectedTemplate", "emptyTemplate", "groupTemplate", "tagTemplate", "loadingTemplate"], never, true, never>;
 }
 
 /**
@@ -957,5 +1008,5 @@ declare class ComDropdownGroup {
     static ɵcmp: i0.ɵɵComponentDeclaration<ComDropdownGroup, "com-dropdown-group", ["comDropdownGroup"], { "label": { "alias": "label"; "required": true; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "showCount": { "alias": "showCount"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "groupTemplate": { "alias": "groupTemplate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { ComDropdown, ComDropdownEmptyTpl, ComDropdownGroup, ComDropdownGroupTpl, ComDropdownOption, ComDropdownOptionTpl, ComDropdownPanel, ComDropdownSearch, ComDropdownSelectedTpl, ComDropdownTag, ComDropdownTagTpl, defaultCompareWith, defaultDisplayWith, defaultFilterWith, dropdownChevronVariants, dropdownClearVariants, dropdownEmptyVariants, dropdownGroupVariants, dropdownOptionVariants, dropdownOverflowBadgeVariants, dropdownPanelVariants, dropdownSearchVariants, dropdownTagRemoveVariants, dropdownTagVariants, dropdownTriggerVariants, generateDropdownId };
-export type { ComDropdownEmptyContext, ComDropdownGroupContext, ComDropdownGroup$1 as ComDropdownGroupData, ComDropdownOptionContext, ComDropdownPanelWidth, ComDropdownPosition, ComDropdownProcessedOption, ComDropdownSelectedContext, ComDropdownTagContext, DropdownChevronVariants, DropdownClearVariants, DropdownEmptyVariants, DropdownGroupVariants, DropdownOptionVariants, DropdownOverflowBadgeVariants, DropdownPanelVariants, DropdownSearchVariants, DropdownSize, DropdownState, DropdownTagRemoveVariants, DropdownTagVariants, DropdownTriggerVariants, DropdownVariant };
+export { ComDropdown, ComDropdownEmptyTpl, ComDropdownGroup, ComDropdownGroupTpl, ComDropdownLoadingTpl, ComDropdownOption, ComDropdownOptionTpl, ComDropdownPanel, ComDropdownSearch, ComDropdownSelectedTpl, ComDropdownTag, ComDropdownTagTpl, defaultCompareWith, defaultDisplayWith, defaultFilterWith, dropdownChevronVariants, dropdownClearVariants, dropdownEmptyVariants, dropdownGroupVariants, dropdownLoadingVariants, dropdownOptionVariants, dropdownOverflowBadgeVariants, dropdownPanelVariants, dropdownSearchVariants, dropdownTagRemoveVariants, dropdownTagVariants, dropdownTriggerVariants, generateDropdownId };
+export type { ComDropdownEmptyContext, ComDropdownGroupContext, ComDropdownGroup$1 as ComDropdownGroupData, ComDropdownOptionContext, ComDropdownPanelWidth, ComDropdownPosition, ComDropdownProcessedOption, ComDropdownSelectedContext, ComDropdownTagContext, DropdownChevronVariants, DropdownClearVariants, DropdownEmptyVariants, DropdownGroupVariants, DropdownLoadingVariants, DropdownOptionVariants, DropdownOverflowBadgeVariants, DropdownPanelVariants, DropdownSearchVariants, DropdownSize, DropdownState, DropdownTagRemoveVariants, DropdownTagVariants, DropdownTriggerVariants, DropdownVariant };

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, InputSignal, Signal, InputSignalWithTransform, TrackByFunction } from '@angular/core';
+import { TemplateRef, InputSignal, Signal, InputSignalWithTransform, TrackByFunction, InjectionToken, OutputEmitterRef } from '@angular/core';
 import { VariantProps } from 'class-variance-authority';
 
 /**
@@ -259,39 +259,45 @@ declare const tableHeaderVariants: (props?: {
 }) => string;
 type TableHeaderVariants = VariantProps<typeof tableHeaderVariants>;
 /**
- * CVA variants for `<th>` header cells.
+ * CVA variants for the header `<tr>` — applies base styles to child `<th>` cells via child selectors.
  *
  * @tokens `--color-muted-foreground`
  */
-declare const tableHeaderCellVariants: (props?: {
+declare const tableHeaderRowVariants: (props?: {
     density?: TableDensity;
 }) => string;
-type TableHeaderCellVariants = VariantProps<typeof tableHeaderCellVariants>;
+type TableHeaderRowVariants = VariantProps<typeof tableHeaderRowVariants>;
 /**
- * CVA variants for `<tbody> <tr>` rows.
+ * CVA variants for `<tbody> <tr>` rows — includes row-level styles and child `<td>` cell styles.
  *
  * @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>;
+type TableRowVariants = VariantProps<typeof tableRowVariants>;
 /**
- * CVA variants for `<tfoot> <td>` footer cells.
+ * CVA variants for the footer `<tr>` — applies base styles to child `<td>` cells via child selectors.
  *
  * @tokens `--color-foreground`, `--color-border`
  */
-declare const tableFooterCellVariants: (props?: {
+declare const tableFooterRowVariants: (props?: {
     density?: TableDensity;
 }) => string;
-type TableFooterCellVariants = VariantProps<typeof tableFooterCellVariants>;
+type TableFooterRowVariants = VariantProps<typeof tableFooterRowVariants>;
+/** @deprecated Use `tableHeaderRowVariants` instead. */
+declare const tableHeaderCellVariants: typeof tableHeaderRowVariants;
+/** @deprecated Use `tableHeaderRowVariants` instead. */
+type TableHeaderCellVariants = TableHeaderRowVariants;
+/** @deprecated Body cell styles are now part of `tableRowVariants`. */
+declare const tableBodyCellVariants: typeof tableRowVariants;
+/** @deprecated Body cell styles are now part of `tableRowVariants`. */
+type TableBodyCellVariants = TableRowVariants;
+/** @deprecated Use `tableFooterRowVariants` instead. */
+declare const tableFooterCellVariants: typeof tableFooterRowVariants;
+/** @deprecated Use `tableFooterRowVariants` instead. */
+type TableFooterCellVariants = TableFooterRowVariants;
 
 /**
  * Declarative data table component using native HTML `<table>` semantics.
@@ -339,6 +345,7 @@ type TableFooterCellVariants = VariantProps<typeof tableFooterCellVariants>;
  */
 declare class ComTable<T> {
     private readonly destroyRef;
+    private readonly rowClickRef;
     /** 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. */
@@ -369,23 +376,92 @@ declare class ComTable<T> {
     readonly renderData: Signal<readonly T[]>;
     /** @internal Header column names. */
     protected readonly headerColumns: Signal<string[]>;
-    /** @internal Body column names. */
-    protected readonly bodyColumns: Signal<string[]>;
+    /** @internal Body column names — public for ComRowClick event delegation. */
+    readonly bodyColumns: Signal<string[]>;
     /** @internal Footer column names. */
     protected readonly footerColumns: Signal<string[]>;
     /** @internal Whether the header should be sticky. */
     private readonly isSticky;
+    /** @internal Whether body rows are clickable (ComRowClick directive is active). */
+    protected readonly isRowClickable: Signal<boolean>;
     protected readonly containerClasses: Signal<string>;
     protected readonly tableClasses: Signal<string>;
     protected readonly theadClasses: Signal<string>;
-    protected readonly thClasses: Signal<string>;
+    protected readonly headerTrClasses: Signal<string>;
     protected readonly trClasses: Signal<string>;
-    protected readonly tdClasses: Signal<string>;
-    protected readonly tfootTdClasses: Signal<string>;
+    protected readonly footerTrClasses: 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 };
+/** Data context that ComTable pushes to ComRowClick to avoid circular DI. */
+interface ComRowClickContext<T = unknown> {
+    readonly renderData: Signal<readonly T[]>;
+    readonly bodyColumns: Signal<string[]>;
+}
+/** Minimal interface that ComTable reads to detect an active row-click directive. */
+interface ComRowClickRef<T = unknown> {
+    /** Whether row-click behavior is currently active (exists and not disabled). */
+    readonly isActive: Signal<boolean>;
+    /** Called by ComTable to provide data context — avoids circular injection. */
+    _setContext(ctx: ComRowClickContext<T>): void;
+}
+/**
+ * Injection token used by ComTable to optionally detect a ComRowClick directive.
+ * Breaks the circular dependency between ComTable and ComRowClick.
+ */
+declare const COM_ROW_CLICK: InjectionToken<ComRowClickRef>;
+
+/**
+ * Attribute directive that enables click-to-act on `<com-table>` body rows.
+ *
+ * Uses event delegation — a single click/keydown listener on the `<table>` element —
+ * rather than per-row bindings. When a user clicks or presses Enter/Space on a body row,
+ * the directive resolves the row data and emits it, unless the click originated from an
+ * excluded column's cell.
+ *
+ * @tokens `--color-ring`
+ *
+ * @example Basic
+ * ```html
+ * <com-table [dataSource]="users()" comRowClick (comRowClick)="openDetail($event)">
+ *   ...
+ * </com-table>
+ * ```
+ *
+ * @example With column exclusion
+ * ```html
+ * <com-table [dataSource]="users()" comRowClick
+ *            [comRowClickExclude]="['select', 'actions']"
+ *            (comRowClick)="openDetail($event)">
+ *   ...
+ * </com-table>
+ * ```
+ */
+declare class ComRowClick<T = unknown> implements ComRowClickRef<T> {
+    private readonly elementRef;
+    private readonly renderer;
+    private readonly destroyRef;
+    private readonly document;
+    /** @internal Context pushed by ComTable — avoids circular DI. */
+    private context;
+    /** Column names whose cells do NOT trigger the row click output. */
+    readonly comRowClickExclude: InputSignal<string[]>;
+    /** Disables all row click behavior — removes cursor, tabindex, and event handling. */
+    readonly comRowClickDisabled: InputSignalWithTransform<boolean, unknown>;
+    /** Emits the row data object when a non-excluded cell is clicked or activated via keyboard. */
+    readonly comRowClick: OutputEmitterRef<T>;
+    /** Whether row-click behavior is currently active. */
+    readonly isActive: Signal<boolean>;
+    /** @internal Called by ComTable to provide data context. */
+    _setContext(ctx: ComRowClickContext<T>): void;
+    constructor();
+    private handleEvent;
+    private emitRow;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComRowClick<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComRowClick<any>, "com-table[comRowClick]", ["comRowClick"], { "comRowClickExclude": { "alias": "comRowClickExclude"; "required": false; "isSignal": true; }; "comRowClickDisabled": { "alias": "comRowClickDisabled"; "required": false; "isSignal": true; }; }, { "comRowClick": "comRowClick"; }, never, never, true, never>;
+}
+
+export { COM_ROW_CLICK, ComArrayDataSource, ComCellDef, ComColumnDef, ComDataSource, ComFooterCellDef, ComFooterRowDef, ComHeaderCellDef, ComHeaderRowDef, ComNoDataRow, ComRowClick, ComRowDef, ComTable, isDataSource, tableBodyCellVariants, tableContainerVariants, tableFooterCellVariants, tableFooterRowVariants, tableHeaderCellVariants, tableHeaderRowVariants, tableHeaderVariants, tableRowVariants, tableVariants };
+export type { CellDefContext, ComRowClickRef, ComTableDataSourceInput, TableBodyCellVariants, TableContainerVariants, TableDensity, TableFooterCellVariants, TableFooterRowVariants, TableHeaderCellVariants, TableHeaderRowVariants, TableHeaderVariants, TableRowVariants, TableVariant, TableVariants };