@alaarab/ogrid-angular 2.0.9 → 2.0.12

package/dist/esm/components/sidebar.component.js

@@ -4,31 +4,31 @@ 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 } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 const PANEL_WIDTH = 240;
 const TAB_WIDTH = 36;
 const PANEL_LABELS = { columns: 'Columns', filters: 'Filters' };
 let SideBarComponent = class SideBarComponent {
     constructor() {
-        this.sideBarProps = input(null);
+        this.sideBarProps = null;
         this.panelLabels = PANEL_LABELS;
         this.tabWidth = TAB_WIDTH;
         this.panelWidth = PANEL_WIDTH;
     }
     onTabClick(panel) {
-        const props = this.sideBarProps();
+        const props = this.sideBarProps;
         if (props)
             props.onPanelChange(props.activePanel === panel ? null : panel);
     }
     allVisible() {
-        const props = this.sideBarProps();
+        const props = this.sideBarProps;
         if (!props)
             return false;
         return props.columns.every((c) => props.visibleColumns.has(c.columnId));
     }
     onSelectAll() {
-        const props = this.sideBarProps();
+        const props = this.sideBarProps;
         if (!props)
             return;
         const next = new Set(props.visibleColumns);
@@ -36,7 +36,7 @@ let SideBarComponent = class SideBarComponent {
         props.onSetVisibleColumns(next);
     }
     onClearAll() {
-        const props = this.sideBarProps();
+        const props = this.sideBarProps;
         if (!props)
             return;
         const next = new Set();
@@ -47,52 +47,55 @@ let SideBarComponent = class SideBarComponent {
         props.onSetVisibleColumns(next);
     }
     onVisibilityChange(columnKey, visible) {
-        this.sideBarProps()?.onVisibilityChange(columnKey, visible);
+        this.sideBarProps?.onVisibilityChange(columnKey, visible);
     }
     getTextFilterValue(filterField) {
-        const filters = this.sideBarProps()?.filters;
+        const filters = this.sideBarProps?.filters;
         const fv = filters?.[filterField];
         return fv?.type === 'text' ? fv.value : '';
     }
     onTextFilterChange(filterField, value) {
-        this.sideBarProps()?.onFilterChange(filterField, value ? { type: 'text', value } : undefined);
+        this.sideBarProps?.onFilterChange(filterField, value ? { type: 'text', value } : undefined);
     }
     getDateFrom(filterField) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        const fv = this.sideBarProps?.filters?.[filterField];
         return fv?.type === 'date' ? (fv.value.from ?? '') : '';
     }
     getDateTo(filterField) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        const fv = this.sideBarProps?.filters?.[filterField];
         return fv?.type === 'date' ? (fv.value.to ?? '') : '';
     }
     onDateFromChange(filterField, value) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        const fv = this.sideBarProps?.filters?.[filterField];
         const existing = fv?.type === 'date' ? fv.value : {};
         const from = value || undefined;
         const to = existing.to;
-        this.sideBarProps()?.onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
+        this.sideBarProps?.onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
     }
     onDateToChange(filterField, value) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        const fv = this.sideBarProps?.filters?.[filterField];
         const existing = fv?.type === 'date' ? fv.value : {};
         const to = value || undefined;
         const from = existing.from;
-        this.sideBarProps()?.onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
+        this.sideBarProps?.onFilterChange(filterField, from || to ? { type: 'date', value: { from, to } } : undefined);
     }
     getFilterOptions(filterField) {
-        return this.sideBarProps()?.filterOptions?.[filterField] ?? [];
+        return this.sideBarProps?.filterOptions?.[filterField] ?? [];
     }
     isMultiSelectChecked(filterField, opt) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        const fv = this.sideBarProps?.filters?.[filterField];
         return fv?.type === 'multiSelect' ? fv.value.includes(opt) : false;
     }
     onMultiSelectChange(filterField, opt, checked) {
-        const fv = this.sideBarProps()?.filters?.[filterField];
+        const fv = this.sideBarProps?.filters?.[filterField];
         const current = fv?.type === 'multiSelect' ? fv.value : [];
         const next = checked ? [...current, opt] : current.filter((v) => v !== opt);
-        this.sideBarProps()?.onFilterChange(filterField, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
+        this.sideBarProps?.onFilterChange(filterField, next.length > 0 ? { type: 'multiSelect', value: next } : undefined);
     }
 };
+__decorate([
+    Input()
+], SideBarComponent.prototype, "sideBarProps", void 0);
 SideBarComponent = __decorate([
     Component({
         selector: 'ogrid-sidebar',
@@ -103,56 +106,56 @@ SideBarComponent = __decorate([
     .ogrid-sidebar-tab-strip {
       display: flex; flex-direction: column;
       width: var(--ogrid-sidebar-tab-size, 36px);
-      background: var(--ogrid-header-bg, #f5f5f5);
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
     }
-    .ogrid-sidebar-tab-strip--left { border-right: 1px solid var(--ogrid-border, #e0e0e0); }
-    .ogrid-sidebar-tab-strip--right { border-left: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-sidebar-tab-strip--left { border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
+    .ogrid-sidebar-tab-strip--right { border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
     .ogrid-sidebar-tab {
       width: var(--ogrid-sidebar-tab-size, 36px);
       height: var(--ogrid-sidebar-tab-size, 36px);
       border: none; cursor: pointer;
-      color: var(--ogrid-fg, #242424); font-size: 14px;
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); font-size: 14px;
       display: flex; align-items: center; justify-content: center;
       background: transparent; font-weight: normal;
     }
-    .ogrid-sidebar-tab--active { background: var(--ogrid-bg, #fff); font-weight: bold; }
+    .ogrid-sidebar-tab--active { background: var(--ogrid-bg, #ffffff); font-weight: bold; }
     .ogrid-sidebar-panel {
       width: var(--ogrid-sidebar-panel-width, 240px);
       display: flex; flex-direction: column; overflow: hidden;
-      background: var(--ogrid-bg, #fff); color: var(--ogrid-fg, #242424);
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .ogrid-sidebar-panel--left { border-right: 1px solid var(--ogrid-border, #e0e0e0); }
-    .ogrid-sidebar-panel--right { border-left: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-sidebar-panel--left { border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
+    .ogrid-sidebar-panel--right { border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); }
     .ogrid-sidebar-panel-header {
       display: flex; justify-content: space-between; align-items: center;
-      padding: 8px 12px; border-bottom: 1px solid var(--ogrid-border, #e0e0e0); font-weight: 600;
+      padding: 8px 12px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); font-weight: 600;
     }
     .ogrid-sidebar-panel-close {
       border: none; background: transparent; cursor: pointer;
-      font-size: 16px; color: var(--ogrid-fg, #242424);
+      font-size: 16px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
     .ogrid-sidebar-panel-body { flex: 1; overflow-y: auto; padding: 8px 12px; }
     .ogrid-sidebar-actions { display: flex; gap: 8px; margin-bottom: 8px; }
     .ogrid-sidebar-action-btn {
       flex: 1; cursor: pointer;
-      background: var(--ogrid-bg-subtle, #f3f2f1); color: var(--ogrid-fg, #242424);
-      border: 1px solid var(--ogrid-border, #e0e0e0); border-radius: 4px; padding: 4px 8px;
+      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04)); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px; padding: 4px 8px;
     }
     .ogrid-sidebar-col-label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
-    .ogrid-sidebar-empty { color: var(--ogrid-muted, #999); font-style: italic; }
+    .ogrid-sidebar-empty { color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5)); font-style: italic; }
     .ogrid-sidebar-filter-group { margin-bottom: 12px; }
     .ogrid-sidebar-filter-label { font-weight: 500; margin-bottom: 4px; font-size: 13px; }
     .ogrid-sidebar-text-input {
       width: 100%; box-sizing: border-box; padding: 4px 6px;
-      background: var(--ogrid-bg, #fff); color: var(--ogrid-fg, #242424);
-      border: 1px solid var(--ogrid-border, #e0e0e0); border-radius: 4px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
     }
     .ogrid-sidebar-date-row { display: flex; flex-direction: column; gap: 4px; }
     .ogrid-sidebar-date-label { display: flex; align-items: center; gap: 4px; font-size: 12px; }
     .ogrid-sidebar-date-input {
       flex: 1; padding: 2px 4px;
-      background: var(--ogrid-bg, #fff); color: var(--ogrid-fg, #242424);
-      border: 1px solid var(--ogrid-border, #e0e0e0); border-radius: 4px;
+      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
     }
     .ogrid-sidebar-multiselect-list { max-height: 120px; overflow-y: auto; }
     .ogrid-sidebar-multiselect-item {
@@ -162,11 +165,11 @@ SideBarComponent = __decorate([
   `],
         template: `
     <div class="ogrid-sidebar-root" role="complementary" aria-label="Side bar">
-      @if (sideBarProps()?.position === 'left') {
+      @if (sideBarProps?.position === 'left') {
         <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
         <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
       }
-      @if (sideBarProps()?.position === 'right') {
+      @if (sideBarProps?.position === 'right') {
         <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
         <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
       }
@@ -175,17 +178,17 @@ SideBarComponent = __decorate([
     <ng-template #tabStripTpl>
       <div
         class="ogrid-sidebar-tab-strip"
-        [class.ogrid-sidebar-tab-strip--left]="sideBarProps()?.position === 'left'"
-        [class.ogrid-sidebar-tab-strip--right]="sideBarProps()?.position === 'right'"
+        [class.ogrid-sidebar-tab-strip--left]="sideBarProps?.position === 'left'"
+        [class.ogrid-sidebar-tab-strip--right]="sideBarProps?.position === 'right'"
         role="tablist"
         aria-label="Side bar tabs"
       >
-        @for (panel of sideBarProps()?.panels ?? []; track panel) {
+        @for (panel of sideBarProps?.panels ?? []; track panel) {
           <button
             role="tab"
             class="ogrid-sidebar-tab"
-            [class.ogrid-sidebar-tab--active]="sideBarProps()?.activePanel === panel"
-            [attr.aria-selected]="sideBarProps()?.activePanel === panel"
+            [class.ogrid-sidebar-tab--active]="sideBarProps?.activePanel === panel"
+            [attr.aria-selected]="sideBarProps?.activePanel === panel"
             [attr.aria-label]="panelLabels[panel]"
             (click)="onTabClick(panel)"
             [title]="panelLabels[panel]"
@@ -197,36 +200,36 @@ SideBarComponent = __decorate([
     </ng-template>
 
     <ng-template #panelContentTpl>
-      @if (sideBarProps()?.activePanel) {
+      @if (sideBarProps?.activePanel) {
         <div
           role="tabpanel"
           class="ogrid-sidebar-panel"
-          [class.ogrid-sidebar-panel--left]="sideBarProps()?.position === 'left'"
-          [class.ogrid-sidebar-panel--right]="sideBarProps()?.position === 'right'"
-          [attr.aria-label]="panelLabels[sideBarProps()!.activePanel!]"
+          [class.ogrid-sidebar-panel--left]="sideBarProps?.position === 'left'"
+          [class.ogrid-sidebar-panel--right]="sideBarProps?.position === 'right'"
+          [attr.aria-label]="panelLabels[sideBarProps!.activePanel!]"
         >
           <div class="ogrid-sidebar-panel-header">
-            <span>{{ panelLabels[sideBarProps()!.activePanel!] }}</span>
-            <button (click)="sideBarProps()?.onPanelChange(null)" class="ogrid-sidebar-panel-close" aria-label="Close panel">&times;</button>
+            <span>{{ panelLabels[sideBarProps!.activePanel!] }}</span>
+            <button (click)="sideBarProps?.onPanelChange(null)" class="ogrid-sidebar-panel-close" aria-label="Close panel">&times;</button>
           </div>
           <div class="ogrid-sidebar-panel-body">
-            @if (sideBarProps()?.activePanel === 'columns') {
+            @if (sideBarProps?.activePanel === 'columns') {
               <div class="ogrid-sidebar-actions">
                 <button (click)="onSelectAll()" [disabled]="allVisible()" class="ogrid-sidebar-action-btn">Select All</button>
                 <button (click)="onClearAll()" class="ogrid-sidebar-action-btn">Clear All</button>
               </div>
-              @for (col of sideBarProps()?.columns ?? []; track col.columnId) {
+              @for (col of sideBarProps?.columns ?? []; track col.columnId) {
                 <label class="ogrid-sidebar-col-label">
-                  <input type="checkbox" [checked]="sideBarProps()?.visibleColumns?.has(col.columnId)" (change)="onVisibilityChange(col.columnId, $any($event.target).checked)" [disabled]="col.required" />
+                  <input type="checkbox" [checked]="sideBarProps?.visibleColumns?.has(col.columnId)" (change)="onVisibilityChange(col.columnId, $any($event.target).checked)" [disabled]="col.required" />
                   <span>{{ col.name }}</span>
                 </label>
               }
             }
-            @if (sideBarProps()?.activePanel === 'filters') {
-              @if ((sideBarProps()?.filterableColumns ?? []).length === 0) {
+            @if (sideBarProps?.activePanel === 'filters') {
+              @if ((sideBarProps?.filterableColumns ?? []).length === 0) {
                 <div class="ogrid-sidebar-empty">No filterable columns</div>
               }
-              @for (col of sideBarProps()?.filterableColumns ?? []; track col.columnId) {
+              @for (col of sideBarProps?.filterableColumns ?? []; track col.columnId) {
                 <div class="ogrid-sidebar-filter-group">
                   <div class="ogrid-sidebar-filter-label">{{ col.name }}</div>
                   @if (col.filterType === 'text') {

package/dist/esm/components/status-bar.component.js

@@ -4,41 +4,61 @@ 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 } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { getStatusBarParts } from '@alaarab/ogrid-core';
 let StatusBarComponent = class StatusBarComponent {
     constructor() {
-        this.totalCount = input.required();
-        this.filteredCount = input(undefined);
-        this.selectedCount = input(undefined);
-        this.selectedCellCount = input(undefined);
-        this.aggregation = input(undefined);
-        this.suppressRowCount = input(undefined);
-        this.classNames = input(undefined);
-        this.parts = () => {
-            return getStatusBarParts({
-                totalCount: this.totalCount(),
-                filteredCount: this.filteredCount(),
-                selectedCount: this.selectedCount(),
-                selectedCellCount: this.selectedCellCount(),
-                aggregation: this.aggregation() ?? undefined,
-                suppressRowCount: this.suppressRowCount(),
-            });
-        };
+        this.filteredCount = undefined;
+        this.selectedCount = undefined;
+        this.selectedCellCount = undefined;
+        this.aggregation = undefined;
+        this.suppressRowCount = undefined;
+        this.classNames = undefined;
+    }
+    getParts() {
+        return getStatusBarParts({
+            totalCount: this.totalCount,
+            filteredCount: this.filteredCount,
+            selectedCount: this.selectedCount,
+            selectedCellCount: this.selectedCellCount,
+            aggregation: this.aggregation ?? undefined,
+            suppressRowCount: this.suppressRowCount,
+        });
     }
 };
+__decorate([
+    Input({ required: true })
+], StatusBarComponent.prototype, "totalCount", void 0);
+__decorate([
+    Input()
+], StatusBarComponent.prototype, "filteredCount", void 0);
+__decorate([
+    Input()
+], StatusBarComponent.prototype, "selectedCount", void 0);
+__decorate([
+    Input()
+], StatusBarComponent.prototype, "selectedCellCount", void 0);
+__decorate([
+    Input()
+], StatusBarComponent.prototype, "aggregation", void 0);
+__decorate([
+    Input()
+], StatusBarComponent.prototype, "suppressRowCount", void 0);
+__decorate([
+    Input()
+], StatusBarComponent.prototype, "classNames", void 0);
 StatusBarComponent = __decorate([
     Component({
         selector: 'ogrid-status-bar',
         standalone: true,
         imports: [CommonModule],
         template: `
-    <div [class]="classNames()?.statusBar ?? ''" role="status" aria-live="polite">
-      @for (part of parts(); track part.key) {
-        <span [class]="classNames()?.statusBarItem ?? ''">
-          <span [class]="classNames()?.statusBarLabel ?? ''">{{ part.label }}</span>
-          <span [class]="classNames()?.statusBarValue ?? ''">{{ part.value.toLocaleString() }}</span>
+    <div [class]="classNames?.statusBar ?? ''" role="status" aria-live="polite">
+      @for (part of getParts(); track part.key) {
+        <span [class]="classNames?.statusBarItem ?? ''">
+          <span [class]="classNames?.statusBarLabel ?? ''">{{ part.label }}</span>
+          <span [class]="classNames?.statusBarValue ?? ''">{{ part.value.toLocaleString() }}</span>
         </span>
       }
     </div>

package/dist/esm/index.js

@@ -16,4 +16,7 @@ export { SideBarComponent } from './components/sidebar.component';
 export { MarchingAntsOverlayComponent } from './components/marching-ants-overlay.component';
 export { EmptyStateComponent } from './components/empty-state.component';
 export { BaseDataGridTableComponent } from './components/base-datagrid-table.component';
+export { BaseColumnHeaderFilterComponent } from './components/base-column-header-filter.component';
+export { BaseColumnChooserComponent } from './components/base-column-chooser.component';
+export { BasePaginationControlsComponent } from './components/base-pagination-controls.component';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';

package/dist/esm/services/datagrid-state.service.js

@@ -1081,7 +1081,7 @@ let DataGridStateService = class DataGridStateService {
             headerFilterInput: {
                 sortBy: p?.sortBy,
                 sortDirection: p?.sortDirection ?? 'asc',
-                onColumnSort: (columnKey) => p?.onColumnSort(columnKey),
+                onColumnSort: (columnKey, direction) => p?.onColumnSort(columnKey, direction),
                 filters: p?.filters ?? {},
                 onFilterChange: (key, value) => p?.onFilterChange(key, value),
                 filterOptions: p?.filterOptions ?? {},

package/dist/esm/services/ogrid.service.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Injectable, signal, computed, effect, DestroyRef, inject } from '@angular/core';
-import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, } from '@alaarab/ogrid-core';
+import { mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, flattenColumns, processClientSideData, computeNextSortState, } from '@alaarab/ogrid-core';
 const DEFAULT_PAGE_SIZE = 25;
 const EMPTY_LOADING_OPTIONS = {};
 const DEFAULT_PANELS = ['columns', 'filters'];
@@ -67,6 +67,7 @@ let OGridService = class OGridService {
         this.onFirstDataRendered = signal(undefined);
         this.onError = signal(undefined);
         this.columnChooserProp = signal(undefined);
+        this.columnReorder = signal(undefined);
         this.virtualScroll = signal(undefined);
         this.ariaLabel = signal(undefined);
         this.ariaLabelledBy = signal(undefined);
@@ -215,7 +216,7 @@ let OGridService = class OGridService {
             getRowId: this.getRowId(),
             sortBy: this.sort().field,
             sortDirection: this.sort().direction,
-            onColumnSort: (columnKey) => this.handleSort(columnKey),
+            onColumnSort: (columnKey, direction) => this.handleSort(columnKey, direction),
             visibleColumns: this.visibleColumns(),
             columnOrder: this.columnOrder(),
             onColumnOrderChange: this.onColumnOrderChange(),
@@ -246,6 +247,7 @@ let OGridService = class OGridService {
             getUserByEmail: this.dataSource()?.getUserByEmail?.bind(this.dataSource()),
             layoutMode: this.layoutMode(),
             suppressHorizontalScroll: this.suppressHorizontalScroll(),
+            columnReorder: this.columnReorder(),
             virtualScroll: this.virtualScroll(),
             'aria-label': this.ariaLabel(),
             'aria-labelledby': this.ariaLabelledBy(),
@@ -401,12 +403,8 @@ let OGridService = class OGridService {
             this.internalVisibleColumnsOverride.set(cols);
         this.onVisibleColumnsChange()?.(cols);
     }
-    handleSort(columnKey) {
-        const sort = this.sort();
-        this.setSort({
-            field: columnKey,
-            direction: sort.field === columnKey && sort.direction === 'asc' ? 'desc' : 'asc',
-        });
+    handleSort(columnKey, direction) {
+        this.setSort(computeNextSortState(this.sort(), columnKey, direction));
     }
     handleFilterChange(key, value) {
         this.setFilters(mergeFilter(this.filters(), key, value));
@@ -521,6 +519,8 @@ let OGridService = class OGridService {
             this.onError.set(props.onError);
         if (props.columnChooser !== undefined)
             this.columnChooserProp.set(props.columnChooser);
+        if (props.columnReorder !== undefined)
+            this.columnReorder.set(props.columnReorder);
         if (props.virtualScroll !== undefined)
             this.virtualScroll.set(props.virtualScroll);
         if (props.entityLabelPlural !== undefined)

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

@@ -0,0 +1,37 @@
+import { EventEmitter } from '@angular/core';
+import type { IColumnDefinition } from '../types';
+export interface IColumnChooserProps {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+}
+/**
+ * Abstract base class containing all shared TypeScript logic for ColumnChooser components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ * 2. Handle their own click-outside behavior (host binding or effect)
+ */
+export declare abstract class BaseColumnChooserComponent {
+    private readonly _columns;
+    private readonly _visibleColumns;
+    set columns(v: IColumnDefinition[]);
+    get columns(): IColumnDefinition[];
+    set visibleColumns(v: Set<string>);
+    get visibleColumns(): Set<string>;
+    visibilityChange: EventEmitter<{
+        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;
+    onToggle(columnKey: string, checked: boolean): void;
+    selectAll(): void;
+    clearAll(): void;
+    onClearAll(): void;
+    onSelectAll(): void;
+}

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

@@ -0,0 +1,90 @@
+import { ElementRef } from '@angular/core';
+import type { ColumnFilterType, IDateFilterValue, UserLike } from '../types';
+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;
+}
+/**
+ * Abstract base class containing all shared TypeScript logic for ColumnHeaderFilter components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ * 2. Implement abstract accessor for headerEl (ViewChild reference)
+ */
+export declare abstract class BaseColumnHeaderFilterComponent {
+    columnKey: string;
+    columnName: string;
+    private readonly _filterType;
+    private readonly _selectedValues;
+    private readonly _options;
+    private readonly _textValue;
+    private readonly _selectedUser;
+    private readonly _dateValue;
+    set filterType(v: ColumnFilterType);
+    get filterType(): ColumnFilterType;
+    set selectedValues(v: string[] | undefined);
+    get selectedValues(): string[] | undefined;
+    set options(v: string[] | undefined);
+    get options(): string[] | undefined;
+    set textValue(v: string);
+    get textValue(): string;
+    set selectedUser(v: UserLike | undefined);
+    get selectedUser(): UserLike | undefined;
+    set dateValue(v: IDateFilterValue | undefined);
+    get dateValue(): IDateFilterValue | undefined;
+    isSorted: boolean;
+    isSortedDescending: boolean;
+    onSort: (() => void) | undefined;
+    onFilterChange: ((values: string[]) => void) | undefined;
+    isLoadingOptions: boolean;
+    onTextChange: ((value: string) => void) | undefined;
+    onUserChange: ((user: UserLike | undefined) => void) | undefined;
+    peopleSearch: ((query: string) => Promise<UserLike[]>) | undefined;
+    onDateChange: ((value: IDateFilterValue | undefined) => void) | undefined;
+    protected abstract getHeaderEl(): ElementRef<HTMLElement> | undefined;
+    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, selectorName: string): void;
+}

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

@@ -19,12 +19,16 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly virtualScrollService: VirtualScrollService;
     protected lastMouseShift: boolean;
     readonly columnSizingVersion: import("@angular/core").WritableSignal<number>;
+    protected readonly wrapperElSignal: import("@angular/core").WritableSignal<HTMLElement | null>;
+    protected readonly tableContainerElSignal: import("@angular/core").WritableSignal<HTMLElement | null>;
     /** Return the IOGridDataGridProps from however the subclass receives them */
     protected abstract getProps(): IOGridDataGridProps<T> | undefined;
     /** Return the wrapper element ref */
     protected abstract getWrapperRef(): ElementRef<HTMLElement> | undefined;
     /** Return the table container element ref */
     protected abstract getTableContainerRef(): ElementRef<HTMLElement> | undefined;
+    /** Lifecycle hook — populate element signals from @ViewChild refs */
+    ngAfterViewInit(): void;
     readonly state: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridStateResult<T>>;
     readonly tableContainerEl: import("@angular/core").Signal<HTMLElement | null>;
     readonly allItems: import("@angular/core").Signal<T[]>;
@@ -46,6 +50,8 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly currentPage: import("@angular/core").Signal<number>;
     readonly pageSize: import("@angular/core").Signal<number>;
     readonly rowNumberOffset: import("@angular/core").Signal<number>;
+    readonly propsVisibleColumns: import("@angular/core").Signal<Set<string> | undefined>;
+    readonly propsColumnOrder: import("@angular/core").Signal<string[] | undefined>;
     readonly visibleCols: import("@angular/core").Signal<IColumnDef<T>[]>;
     readonly hasCheckboxCol: import("@angular/core").Signal<boolean>;
     readonly hasRowNumbersCol: import("@angular/core").Signal<boolean>;
@@ -81,7 +87,7 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     readonly headerFilterInput: import("@angular/core").Signal<{
         sortBy?: string;
         sortDirection: "asc" | "desc";
-        onColumnSort: (columnKey: string) => void;
+        onColumnSort: (columnKey: string, direction?: "asc" | "desc" | null) => void;
         filters: import("@alaarab/ogrid-core").IFilters;
         onFilterChange: (key: string, value: import("@alaarab/ogrid-core").FilterValue | undefined) => void;
         filterOptions: Record<string, string[]>;
@@ -123,6 +129,10 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
         minWidth: number;
         width: number;
     }[]>;
+    readonly pinningOffsets: import("@angular/core").Signal<{
+        leftOffsets: Record<string, number>;
+        rightOffsets: Record<string, number>;
+    }>;
     /**
      * Initialize base wiring effects. Must be called from subclass constructor
      * (effects need to run inside an injection context).
@@ -138,6 +148,8 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
     buildPopoverEditorProps(item: T, col: IColumnDef<T>, descriptor: CellRenderDescriptor): unknown;
     getSelectValues(col: IColumnDef<T>): string[];
     formatDateForInput(value: unknown): string;
+    getPinnedLeftOffset(columnId: string): number | null;
+    getPinnedRightOffset(columnId: string): number | null;
     onWrapperScroll(event: Event): void;
     setPopoverAnchorEl(el: HTMLElement | null): void;
     setPendingEditorValue(value: unknown): void;
@@ -173,4 +185,10 @@ export declare abstract class BaseDataGridTableComponent<T = unknown> {
         canPinRight: boolean;
         canUnpin: boolean;
     };
+    onSortAsc(columnId: string): void;
+    onSortDesc(columnId: string): void;
+    onClearSort(columnId?: string): void;
+    getSortState(columnId: string): 'asc' | 'desc' | null;
+    onAutosizeColumn(columnId: string): void;
+    onAutosizeAllColumns(): void;
 }