@alaarab/ogrid-angular-material 2.0.9 → 2.0.12

package/dist/esm/datagrid-table/inline-cell-editor.component.js

@@ -4,32 +4,36 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, output, signal, effect, viewChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, signal, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 let InlineCellEditorComponent = class InlineCellEditorComponent {
     constructor() {
-        this.value = input.required();
-        this.item = input.required();
-        this.column = input.required();
-        this.rowIndex = input.required();
-        this.editorType = input.required();
-        this.commit = output();
-        this.cancel = output();
-        this.inputEl = viewChild('inputEl');
+        this.commit = new EventEmitter();
+        this.cancel = new EventEmitter();
         this.localValue = signal('');
         this.selectOptions = signal([]);
-        effect(() => {
-            const v = this.value();
-            this.localValue.set(v != null ? String(v) : '');
-            const col = this.column();
-            if (col.cellEditorParams?.values) {
-                this.selectOptions.set(col.cellEditorParams.values);
-            }
-        });
+        this._initialized = false;
+    }
+    ngOnInit() {
+        this._initialized = true;
+        this.syncFromInputs();
+    }
+    ngOnChanges() {
+        if (this._initialized) {
+            this.syncFromInputs();
+        }
+    }
+    syncFromInputs() {
+        const v = this.value;
+        this.localValue.set(v != null ? String(v) : '');
+        const col = this.column;
+        if (col?.cellEditorParams?.values) {
+            this.selectOptions.set(col.cellEditorParams.values);
+        }
     }
     ngAfterViewInit() {
         setTimeout(() => {
-            const el = this.inputEl()?.nativeElement;
+            const el = this.inputEl?.nativeElement;
             if (el) {
                 el.focus();
                 if (el instanceof HTMLInputElement && el.type === 'text') {
@@ -72,20 +76,44 @@ let InlineCellEditorComponent = class InlineCellEditorComponent {
     }
     getInputStyle() {
         const baseStyle = 'width:100%;box-sizing:border-box;padding:6px 10px;border:2px solid var(--ogrid-selection, #217346);border-radius:2px;outline:none;font:inherit;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424);';
-        const col = this.column();
+        const col = this.column;
         if (col.type === 'numeric') {
             return baseStyle + 'text-align:right;';
         }
         return baseStyle;
     }
 };
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "value", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "item", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "column", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "rowIndex", void 0);
+__decorate([
+    Input({ required: true })
+], InlineCellEditorComponent.prototype, "editorType", void 0);
+__decorate([
+    Output()
+], InlineCellEditorComponent.prototype, "commit", void 0);
+__decorate([
+    Output()
+], InlineCellEditorComponent.prototype, "cancel", void 0);
+__decorate([
+    ViewChild('inputEl')
+], InlineCellEditorComponent.prototype, "inputEl", void 0);
 InlineCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-mat-inline-cell-editor',
         standalone: true,
         imports: [CommonModule],
         template: `
-    @switch (editorType()) {
+    @switch (editorType) {
       @case ('text') {
         <input
           #inputEl

package/dist/esm/datagrid-table/popover-cell-editor.component.js

@@ -4,37 +4,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, ChangeDetectionStrategy, signal, effect, viewChild, Injector, createComponent, EnvironmentInjector, inject, } from '@angular/core';
+import { Component, ChangeDetectionStrategy, signal, effect, ViewChild, Injector, createComponent, EnvironmentInjector, inject, Input } from '@angular/core';
 /**
  * PopoverCellEditor component for Angular Material.
  * Renders custom popover editor when anchor element is set.
  */
 let PopoverCellEditorComponent = class PopoverCellEditorComponent {
     constructor() {
-        this.item = input.required();
-        this.column = input.required();
-        this.rowIndex = input.required();
-        this.globalColIndex = input.required();
-        this.displayValue = input.required();
-        this.editorProps = input.required();
-        this.onCancel = input.required();
-        this.anchorRef = viewChild('anchorEl');
-        this.editorContainerRef = viewChild('editorContainer');
         this.injector = inject(Injector);
         this.envInjector = inject(EnvironmentInjector);
         this.showEditor = signal(false);
         // Show editor after anchor is rendered
         effect(() => {
-            const anchor = this.anchorRef();
+            const anchor = this.anchorRef;
             if (anchor) {
                 setTimeout(() => this.showEditor.set(true), 0);
             }
         });
         // Render custom editor component when container is available
         effect(() => {
-            const container = this.editorContainerRef();
-            const props = this.editorProps();
-            const col = this.column();
+            const container = this.editorContainerRef;
+            const props = this.editorProps;
+            const col = this.column;
             if (!container || !this.showEditor() || typeof col.cellEditor !== 'function')
                 return;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -54,9 +45,36 @@ let PopoverCellEditorComponent = class PopoverCellEditorComponent {
         });
     }
     handleOverlayClick() {
-        this.onCancel()();
+        this.onCancel();
     }
 };
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "item", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "column", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "rowIndex", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "globalColIndex", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "displayValue", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "editorProps", void 0);
+__decorate([
+    Input({ required: true })
+], PopoverCellEditorComponent.prototype, "onCancel", void 0);
+__decorate([
+    ViewChild('anchorEl')
+], PopoverCellEditorComponent.prototype, "anchorRef", void 0);
+__decorate([
+    ViewChild('editorContainer')
+], PopoverCellEditorComponent.prototype, "editorContainerRef", void 0);
 PopoverCellEditorComponent = __decorate([
     Component({
         selector: 'ogrid-mat-popover-cell-editor',
@@ -65,10 +83,10 @@ PopoverCellEditorComponent = __decorate([
         template: `
     <div #anchorEl
       class="ogrid-popover-anchor"
-      [attr.data-row-index]="rowIndex()"
-      [attr.data-col-index]="globalColIndex()"
+      [attr.data-row-index]="rowIndex"
+      [attr.data-col-index]="globalColIndex"
     >
-      {{ displayValue() }}
+      {{ displayValue }}
     </div>
     @if (showEditor()) {
       <div class="ogrid-popover-editor-overlay" (click)="handleOverlayClick()">
@@ -91,9 +109,10 @@ PopoverCellEditorComponent = __decorate([
       display: flex; align-items: center; justify-content: center;
     }
     .ogrid-popover-editor-content {
-      background: #fff; border-radius: 4px; padding: 16px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      background: var(--ogrid-bg, #ffffff); border-radius: 4px; padding: 16px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       max-width: 90vw; max-height: 90vh; overflow: auto;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
   `],
     })

package/dist/esm/index.js

@@ -4,7 +4,9 @@ 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';
+// IColumnHeaderFilterProps is now exported from @alaarab/ogrid-angular (base class)
 export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
+// IColumnChooserProps is now exported from @alaarab/ogrid-angular (base class)
 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/esm/ogrid/ogrid.component.js

@@ -4,39 +4,47 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, computed, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, signal, effect } from '@angular/core';
 import { OGridService, OGridLayoutComponent, } from '@alaarab/ogrid-angular';
 import { DataGridTableComponent } from '../datagrid-table/datagrid-table.component';
 import { ColumnChooserComponent } from '../column-chooser/column-chooser.component';
 import { PaginationControlsComponent } from '../pagination-controls/pagination-controls.component';
 /**
  * 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.
  */
 let OGridComponent = class OGridComponent {
+    set props(value) {
+        this.propsSignal.set(value);
+    }
     constructor() {
-        this.props = input.required();
-        this.dataGridProps = computed(() => {
-            // Ensure service is configured before accessing dataGridProps
-            this.ogridService.configure(this.props());
-            return this.ogridService.dataGridProps();
-        });
-        // The OGridService is provided at the component level, so inject it here
-        // But since we can't use inject() with generics well, we use the providers array
-        // and the Angular DI system will handle it.
-        // Actually we need a slightly different approach for the generic service.
+        this.propsSignal = signal(undefined);
         this.ogridService = new OGridService();
+        effect(() => {
+            const p = this.propsSignal();
+            if (p)
+                this.ogridService.configure(p);
+        });
+    }
+    get showToolbar() {
+        return this.ogridService.columnChooserPlacement() === 'toolbar' || this.ogridService.toolbar() != null;
     }
     onPageSizeChange(size) {
         this.ogridService.pagination().setPageSize(size);
         this.ogridService.pagination().setPage(1);
     }
 };
+__decorate([
+    Input({ required: true })
+], OGridComponent.prototype, "props", null);
 OGridComponent = __decorate([
     Component({
         selector: 'ogrid',
         standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
         imports: [
             OGridLayoutComponent,
             DataGridTableComponent,
@@ -44,15 +52,16 @@ OGridComponent = __decorate([
             PaginationControlsComponent,
         ],
         providers: [OGridService],
-        changeDetection: ChangeDetectionStrategy.OnPush,
+        styles: [`:host { display: block; height: 100%; }`],
         template: `
     <ogrid-layout
       [className]="ogridService.className()"
       [sideBar]="ogridService.sideBarProps()"
-      [toolbar]="ogridService.toolbar()"
-      [toolbarBelow]="ogridService.toolbarBelow()"
+      [hasToolbar]="showToolbar"
+      [hasToolbarBelow]="false"
+      [hasPagination]="true"
     >
-      <ng-container toolbar-end>
+      <ng-container toolbarEnd>
         @if (ogridService.columnChooserPlacement() === 'toolbar') {
           <ogrid-column-chooser
             [columns]="ogridService.columnChooser().columns"
@@ -62,7 +71,7 @@ OGridComponent = __decorate([
         }
       </ng-container>
 
-      <ogrid-datagrid-table [props]="dataGridProps()" />
+      <ogrid-datagrid-table [props]="ogridService.dataGridProps()" />
 
       <ng-container pagination>
         <ogrid-pagination-controls

package/dist/esm/pagination-controls/pagination-controls.component.js

@@ -4,30 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, output, computed, ChangeDetectionStrategy } from '@angular/core';
-import { getPaginationViewModel } from '@alaarab/ogrid-angular';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BasePaginationControlsComponent } from '@alaarab/ogrid-angular';
 /**
  * Pagination controls component using Angular Material styling.
  * Standalone component with inline template — no Angular Material dependency for pagination.
  */
-let PaginationControlsComponent = class PaginationControlsComponent {
-    constructor() {
-        this.currentPage = input.required();
-        this.pageSize = input.required();
-        this.totalCount = input.required();
-        this.pageSizeOptions = input(undefined);
-        this.entityLabelPlural = input('items');
-        this.pageChange = output();
-        this.pageSizeChange = output();
-        this.vm = computed(() => {
-            const opts = this.pageSizeOptions();
-            return getPaginationViewModel(this.currentPage(), this.pageSize(), this.totalCount(), opts ? { pageSizeOptions: opts } : undefined);
-        });
-    }
-    onPageSizeSelect(event) {
-        const value = Number(event.target.value);
-        this.pageSizeChange.emit(value);
-    }
+let PaginationControlsComponent = class PaginationControlsComponent extends BasePaginationControlsComponent {
 };
 PaginationControlsComponent = __decorate([
     Component({
@@ -38,20 +21,20 @@ PaginationControlsComponent = __decorate([
     @if (vm(); as vm) {
       <nav class="ogrid-pagination" role="navigation" aria-label="Pagination">
         <span class="ogrid-pagination__info">
-          Showing {{ vm.startItem }} to {{ vm.endItem }} of {{ totalCount().toLocaleString() }} {{ entityLabelPlural() }}
+          Showing {{ vm.startItem }} to {{ vm.endItem }} of {{ totalCount.toLocaleString() }} {{ entityLabelPlural }}
         </span>
 
         <span class="ogrid-pagination__pages">
           <button
             class="ogrid-pagination__btn"
-            [disabled]="currentPage() === 1"
+            [disabled]="currentPage === 1"
             (click)="pageChange.emit(1)"
             aria-label="First page"
           >&laquo;</button>
           <button
             class="ogrid-pagination__btn"
-            [disabled]="currentPage() === 1"
-            (click)="pageChange.emit(currentPage() - 1)"
+            [disabled]="currentPage === 1"
+            (click)="pageChange.emit(currentPage - 1)"
             aria-label="Previous page"
           >&lsaquo;</button>
 
@@ -63,10 +46,10 @@ PaginationControlsComponent = __decorate([
           @for (pageNum of vm.pageNumbers; track pageNum) {
             <button
               class="ogrid-pagination__btn"
-              [class.ogrid-pagination__btn--active]="currentPage() === pageNum"
+              [class.ogrid-pagination__btn--active]="currentPage === pageNum"
               (click)="pageChange.emit(pageNum)"
               [attr.aria-label]="'Page ' + pageNum"
-              [attr.aria-current]="currentPage() === pageNum ? 'page' : null"
+              [attr.aria-current]="currentPage === pageNum ? 'page' : null"
             >{{ pageNum }}</button>
           }
 
@@ -81,13 +64,13 @@ PaginationControlsComponent = __decorate([
 
           <button
             class="ogrid-pagination__btn"
-            [disabled]="currentPage() >= vm.totalPages"
-            (click)="pageChange.emit(currentPage() + 1)"
+            [disabled]="currentPage >= vm.totalPages"
+            (click)="pageChange.emit(currentPage + 1)"
             aria-label="Next page"
           >&rsaquo;</button>
           <button
             class="ogrid-pagination__btn"
-            [disabled]="currentPage() >= vm.totalPages"
+            [disabled]="currentPage >= vm.totalPages"
             (click)="pageChange.emit(vm.totalPages)"
             aria-label="Last page"
           >&raquo;</button>
@@ -96,12 +79,12 @@ PaginationControlsComponent = __decorate([
         <span class="ogrid-pagination__size">
           <label>Rows
             <select
-              [value]="pageSize()"
+              [value]="pageSize"
               (change)="onPageSizeSelect($event)"
               aria-label="Rows per page"
             >
               @for (n of vm.pageSizeOptions; track n) {
-                <option [value]="n" [selected]="pageSize() === n">{{ n }}</option>
+                <option [value]="n" [selected]="pageSize === n">{{ n }}</option>
               }
             </select>
           </label>
@@ -114,25 +97,29 @@ PaginationControlsComponent = __decorate([
     .ogrid-pagination {
       display: flex; align-items: center; justify-content: space-between;
       flex-wrap: wrap; gap: 8px; padding: 6px 12px; font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .ogrid-pagination__info { color: rgba(0,0,0,0.6); }
+    .ogrid-pagination__info { color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
     .ogrid-pagination__pages { display: flex; align-items: center; gap: 2px; }
     .ogrid-pagination__btn {
       min-width: 32px; height: 32px; padding: 0 6px;
-      border: 1px solid rgba(0,0,0,0.23); border-radius: 4px;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;
       background: transparent; cursor: pointer; font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
+    .ogrid-pagination__btn:hover:not(:disabled) { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
     .ogrid-pagination__btn:disabled { opacity: 0.38; cursor: default; }
     .ogrid-pagination__btn--active {
       background: var(--mat-sys-primary, #1976d2); color: #fff;
       border-color: var(--mat-sys-primary, #1976d2);
     }
-    .ogrid-pagination__ellipsis { margin: 0 4px; color: rgba(0,0,0,0.6); }
-    .ogrid-pagination__size { display: flex; align-items: center; gap: 8px; }
+    .ogrid-pagination__ellipsis { margin: 0 4px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
+    .ogrid-pagination__size { display: flex; align-items: center; gap: 8px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }
     .ogrid-pagination__size select {
       min-width: 60px; height: 32px; padding: 4px 8px;
-      border: 1px solid rgba(0,0,0,0.23); border-radius: 4px;
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;
       font-size: 14px; margin-left: 8px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
   `],
     })

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;