@alaarab/ogrid-angular-material 2.0.8 → 2.0.11

package/dist/types/column-chooser/column-chooser.component.d.ts

@@ -1,26 +1,8 @@
-import type { IColumnDefinition } from '@alaarab/ogrid-angular';
-export interface IColumnChooserProps {
-    columns: IColumnDefinition[];
-    visibleColumns: Set<string>;
-    onVisibilityChange: (columnKey: string, visible: boolean) => void;
-}
+import { BaseColumnChooserComponent } from '@alaarab/ogrid-angular';
 /**
  * Column visibility chooser dropdown using Angular Material styling.
  * Standalone component with inline template.
  */
-export declare class ColumnChooserComponent {
-    readonly columns: import("@angular/core").InputSignal<IColumnDefinition[]>;
-    readonly visibleColumns: import("@angular/core").InputSignal<Set<string>>;
-    readonly visibilityChange: import("@angular/core").OutputEmitterRef<{
-        columnKey: string;
-        visible: boolean;
-    }>;
-    readonly isOpen: import("@angular/core").WritableSignal<boolean>;
-    readonly visibleCount: import("@angular/core").Signal<number>;
-    readonly totalCount: import("@angular/core").Signal<number>;
-    toggle(): void;
-    onCheckboxChange(columnKey: string, event: Event): void;
-    selectAll(): void;
-    clearAll(): void;
+export declare class ColumnChooserComponent extends BaseColumnChooserComponent {
     onDocumentClick(event: MouseEvent): void;
 }

package/dist/types/column-header-filter/column-header-filter.component.d.ts

@@ -1,73 +1,11 @@
-import type { ColumnFilterType, IDateFilterValue, UserLike } from '@alaarab/ogrid-angular';
-export interface IColumnHeaderFilterProps {
-    columnKey: string;
-    columnName: string;
-    filterType: ColumnFilterType;
-    isSorted?: boolean;
-    isSortedDescending?: boolean;
-    onSort?: () => void;
-    selectedValues?: string[];
-    onFilterChange?: (values: string[]) => void;
-    options?: string[];
-    isLoadingOptions?: boolean;
-    textValue?: string;
-    onTextChange?: (value: string) => void;
-    selectedUser?: UserLike;
-    onUserChange?: (user: UserLike | undefined) => void;
-    peopleSearch?: (query: string) => Promise<UserLike[]>;
-    dateValue?: IDateFilterValue;
-    onDateChange?: (value: IDateFilterValue | undefined) => void;
-}
+import { ElementRef } from '@angular/core';
+import { BaseColumnHeaderFilterComponent } from '@alaarab/ogrid-angular';
 /**
  * Column header filter component with sort + filter icon + popover.
  * Standalone component with inline template.
  */
-export declare class ColumnHeaderFilterComponent {
-    readonly columnKey: import("@angular/core").InputSignal<string>;
-    readonly columnName: import("@angular/core").InputSignal<string>;
-    readonly filterType: import("@angular/core").InputSignal<ColumnFilterType>;
-    readonly isSorted: import("@angular/core").InputSignal<boolean>;
-    readonly isSortedDescending: import("@angular/core").InputSignal<boolean>;
-    readonly onSort: import("@angular/core").InputSignal<(() => void) | undefined>;
-    readonly selectedValues: import("@angular/core").InputSignal<string[] | undefined>;
-    readonly onFilterChange: import("@angular/core").InputSignal<((values: string[]) => void) | undefined>;
-    readonly options: import("@angular/core").InputSignal<string[] | undefined>;
-    readonly isLoadingOptions: import("@angular/core").InputSignal<boolean>;
-    readonly textValue: import("@angular/core").InputSignal<string>;
-    readonly onTextChange: import("@angular/core").InputSignal<((value: string) => void) | undefined>;
-    readonly selectedUser: import("@angular/core").InputSignal<UserLike | undefined>;
-    readonly onUserChange: import("@angular/core").InputSignal<((user: UserLike | undefined) => void) | undefined>;
-    readonly peopleSearch: import("@angular/core").InputSignal<((query: string) => Promise<UserLike[]>) | undefined>;
-    readonly dateValue: import("@angular/core").InputSignal<IDateFilterValue | undefined>;
-    readonly onDateChange: import("@angular/core").InputSignal<((value: IDateFilterValue | undefined) => void) | undefined>;
-    private readonly headerEl;
-    readonly isFilterOpen: import("@angular/core").WritableSignal<boolean>;
-    readonly tempTextValue: import("@angular/core").WritableSignal<string>;
-    readonly searchText: import("@angular/core").WritableSignal<string>;
-    readonly tempSelected: import("@angular/core").WritableSignal<Set<string>>;
-    readonly peopleSearchText: import("@angular/core").WritableSignal<string>;
-    readonly peopleSuggestions: import("@angular/core").WritableSignal<UserLike[]>;
-    readonly isPeopleLoading: import("@angular/core").WritableSignal<boolean>;
-    readonly tempDateFrom: import("@angular/core").WritableSignal<string>;
-    readonly tempDateTo: import("@angular/core").WritableSignal<string>;
-    readonly popoverTop: import("@angular/core").WritableSignal<number>;
-    readonly popoverLeft: import("@angular/core").WritableSignal<number>;
-    private peopleDebounceTimer;
-    readonly hasActiveFilter: import("@angular/core").Signal<boolean>;
-    readonly filteredOptions: import("@angular/core").Signal<string[]>;
-    asInputValue(event: Event): string;
-    toggleFilter(event: MouseEvent): void;
-    onTextKeydown(event: KeyboardEvent): void;
-    handleTextApply(): void;
-    handleTextClear(): void;
-    handleCheckboxChange(option: string, event: Event): void;
-    handleSelectAllFiltered(): void;
-    handleClearSelection(): void;
-    handleApplyMultiSelect(): void;
-    onPeopleSearchInput(event: Event): void;
-    handleUserSelect(user: UserLike): void;
-    handleClearUser(): void;
-    handleDateApply(): void;
-    handleDateClear(): void;
-    onDocumentClick(event: MouseEvent): void;
+export declare class ColumnHeaderFilterComponent extends BaseColumnHeaderFilterComponent {
+    private headerEl?;
+    protected getHeaderEl(): ElementRef<HTMLElement> | undefined;
+    onDocumentClickWrapper(event: MouseEvent): void;
 }

package/dist/types/column-header-menu/column-header-menu.component.d.ts

@@ -1,19 +1,19 @@
 import { MatMenuTrigger } from '@angular/material/menu';
+import { type IColumnHeaderMenuItem, type ColumnHeaderMenuHandlers } from '@alaarab/ogrid-core';
 /**
- * Column header dropdown menu for pin/unpin actions.
+ * Column header dropdown menu for pin/unpin, sort, and autosize actions.
  * Uses Angular Material MatMenu.
  */
 export declare class ColumnHeaderMenuComponent {
-    readonly columnId: import("@angular/core").InputSignal<string>;
-    readonly canPinLeft: import("@angular/core").InputSignal<boolean>;
-    readonly canPinRight: import("@angular/core").InputSignal<boolean>;
-    readonly canUnpin: import("@angular/core").InputSignal<boolean>;
-    readonly onPinLeft: import("@angular/core").InputSignal<(() => void) | undefined>;
-    readonly onPinRight: import("@angular/core").InputSignal<(() => void) | undefined>;
-    readonly onUnpin: import("@angular/core").InputSignal<(() => void) | undefined>;
-    readonly menuTrigger: import("@angular/core").Signal<MatMenuTrigger | undefined>;
-    readonly menuItems: import("@alaarab/ogrid-core").IColumnHeaderMenuItem[];
-    handlePinLeft(): void;
-    handlePinRight(): void;
-    handleUnpin(): void;
+    columnId: string;
+    canPinLeft: boolean;
+    canPinRight: boolean;
+    canUnpin: boolean;
+    currentSort: 'asc' | 'desc' | null;
+    isSortable: boolean;
+    isResizable: boolean;
+    handlers: Partial<ColumnHeaderMenuHandlers>;
+    menuTrigger?: MatMenuTrigger;
+    readonly menuItems: import("@angular/core").Signal<IColumnHeaderMenuItem[]>;
+    handleMenuItemClick(itemId: string): void;
 }

package/dist/types/datagrid-table/datagrid-table.component.d.ts

@@ -6,11 +6,24 @@ import type { IOGridDataGridProps } from '@alaarab/ogrid-angular';
  * Standalone component — this is the workhorse of the grid.
  */
 export declare class DataGridTableComponent<T> extends BaseDataGridTableComponent<T> {
-    readonly propsInput: import("@angular/core").InputSignal<IOGridDataGridProps<T>>;
-    private readonly wrapperRef;
-    private readonly tableContainerRef;
+    private readonly propsSignal;
+    set propsInput(value: IOGridDataGridProps<T>);
+    private wrapperRef?;
+    private tableContainerRef?;
     constructor();
     protected getProps(): IOGridDataGridProps<T> | undefined;
     protected getWrapperRef(): ElementRef<HTMLElement> | undefined;
     protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
+    /** Build column header menu handlers for a given column */
+    protected getColumnMenuHandlers(columnId: string): {
+        onPinLeft: () => void;
+        onPinRight: () => void;
+        onUnpin: () => void;
+        onSortAsc: () => void;
+        onSortDesc: () => void;
+        onClearSort: () => void;
+        onAutosizeThis: () => void;
+        onAutosizeAll: () => void;
+        onClose: () => void;
+    };
 }

package/dist/types/datagrid-table/inline-cell-editor.component.d.ts

@@ -1,17 +1,20 @@
-import { ElementRef, AfterViewInit } from '@angular/core';
+import { EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
 import type { IColumnDef } from '@alaarab/ogrid-angular';
 export declare class InlineCellEditorComponent<T = unknown> implements AfterViewInit {
-    readonly value: import("@angular/core").InputSignal<unknown>;
-    readonly item: import("@angular/core").InputSignal<T>;
-    readonly column: import("@angular/core").InputSignal<IColumnDef<T>>;
-    readonly rowIndex: import("@angular/core").InputSignal<number>;
-    readonly editorType: import("@angular/core").InputSignal<"text" | "date" | "select" | "checkbox" | "richSelect">;
-    readonly commit: import("@angular/core").OutputEmitterRef<unknown>;
-    readonly cancel: import("@angular/core").OutputEmitterRef<void>;
-    readonly inputEl: import("@angular/core").Signal<ElementRef<HTMLInputElement | HTMLSelectElement> | undefined>;
+    value: unknown;
+    item: T;
+    column: IColumnDef<T>;
+    rowIndex: number;
+    editorType: 'text' | 'select' | 'checkbox' | 'date' | 'richSelect';
+    commit: EventEmitter<unknown>;
+    cancel: EventEmitter<void>;
+    inputEl?: ElementRef<HTMLInputElement | HTMLSelectElement>;
     readonly localValue: import("@angular/core").WritableSignal<unknown>;
     readonly selectOptions: import("@angular/core").WritableSignal<unknown[]>;
-    constructor();
+    private _initialized;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    private syncFromInputs;
     ngAfterViewInit(): void;
     commitValue(value: unknown): void;
     onTextKeyDown(e: KeyboardEvent): void;

package/dist/types/datagrid-table/popover-cell-editor.component.d.ts

@@ -4,15 +4,15 @@ import type { IColumnDef, ICellEditorProps } from '@alaarab/ogrid-core';
  * Renders custom popover editor when anchor element is set.
  */
 export declare class PopoverCellEditorComponent<T> {
-    readonly item: import("@angular/core").InputSignal<T>;
-    readonly column: import("@angular/core").InputSignal<IColumnDef<T>>;
-    readonly rowIndex: import("@angular/core").InputSignal<number>;
-    readonly globalColIndex: import("@angular/core").InputSignal<number>;
-    readonly displayValue: import("@angular/core").InputSignal<unknown>;
-    readonly editorProps: import("@angular/core").InputSignal<ICellEditorProps<T>>;
-    readonly onCancel: import("@angular/core").InputSignal<() => void>;
-    private readonly anchorRef;
-    private readonly editorContainerRef;
+    item: T;
+    column: IColumnDef<T>;
+    rowIndex: number;
+    globalColIndex: number;
+    displayValue: unknown;
+    editorProps: ICellEditorProps<T>;
+    onCancel: () => void;
+    private anchorRef?;
+    private editorContainerRef?;
     private readonly injector;
     private readonly envInjector;
     protected readonly showEditor: import("@angular/core").WritableSignal<boolean>;

package/dist/types/index.d.ts

@@ -2,9 +2,7 @@ export * from '@alaarab/ogrid-angular';
 export { OGridComponent } from './ogrid/ogrid.component';
 export { DataGridTableComponent } from './datagrid-table/datagrid-table.component';
 export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
-export type { IColumnHeaderFilterProps } from './column-header-filter/column-header-filter.component';
 export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
-export type { IColumnChooserProps } from './column-chooser/column-chooser.component';
 export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
 export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';
 export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.component';

package/dist/types/ogrid/ogrid.component.d.ts

@@ -1,14 +1,17 @@
 import { OGridService } from '@alaarab/ogrid-angular';
-import type { IOGridProps, IOGridDataGridProps } from '@alaarab/ogrid-angular';
+import type { IOGridProps } from '@alaarab/ogrid-angular';
 /**
  * Top-level OGrid component for Angular Material.
- * Equivalent to the React MaterialDataTable/OGrid component.
  * Standalone component — provides OGridService and renders OGridLayout with all sub-components.
+ *
+ * Uses @Input with signal setter for JIT compatibility (project builds with tsc, not ngc).
+ * The effect() reactively configures the service when the input signal changes.
  */
 export declare class OGridComponent<T> {
-    readonly props: import("@angular/core").InputSignal<IOGridProps<T>>;
+    private readonly propsSignal;
     readonly ogridService: OGridService<T>;
-    readonly dataGridProps: import("@angular/core").Signal<IOGridDataGridProps<T>>;
+    set props(value: IOGridProps<T>);
     constructor();
+    get showToolbar(): boolean;
     onPageSizeChange(size: number): void;
 }

package/dist/types/pagination-controls/pagination-controls.component.d.ts

@@ -1,15 +1,7 @@
+import { BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
 /**
  * Pagination controls component using Angular Material styling.
  * Standalone component with inline template — no Angular Material dependency for pagination.
  */
-export declare class PaginationControlsComponent {
-    readonly currentPage: import("@angular/core").InputSignal<number>;
-    readonly pageSize: import("@angular/core").InputSignal<number>;
-    readonly totalCount: import("@angular/core").InputSignal<number>;
-    readonly pageSizeOptions: import("@angular/core").InputSignal<number[] | undefined>;
-    readonly entityLabelPlural: import("@angular/core").InputSignal<string>;
-    readonly pageChange: import("@angular/core").OutputEmitterRef<number>;
-    readonly pageSizeChange: import("@angular/core").OutputEmitterRef<number>;
-    readonly vm: import("@angular/core").Signal<import("@alaarab/ogrid-core").PaginationViewModel | null>;
-    onPageSizeSelect(event: Event): void;
+export declare class PaginationControlsComponent extends BasePaginationControlsComponent {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.0.8",
+  "version": "2.0.11",
   "description": "OGrid Angular Material – MatTable-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.0.7"
+    "@alaarab/ogrid-angular": "2.0.11"
   },
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",