@alaarab/ogrid-angular-material 2.1.2 → 2.1.4

package/dist/types/index.d.ts

@@ -1,4 +1,7 @@
-export * from '@alaarab/ogrid-angular';
+export type { ColumnFilterType, IDateFilterValue, IColumnFilterDef, IColumnMeta, IValueParserParams, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, HeaderCell, HeaderRow, RowId, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, RowSelectionMode, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, SideBarPanelId, ISideBarDef, IVirtualScrollConfig, IColumnReorderConfig, IOGridApi, CsvColumn, StatusBarPart, StatusBarPartsInput, PaginationViewModel, GridContextMenuItem, IColumnHeaderMenuItem, GridContextMenuHandlerProps, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, ColumnPinState, IDropTarget, ICalculateDropTargetParams, IVisibleRange, HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, OverlayRect, ISortState, ArrowNavigationContext, ArrowNavigationResult, ZIndexKey, } from '@alaarab/ogrid-angular';
+export { toUserLike, isInSelectionRange, normalizeSelectionRange, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, isFilterConfig, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, isRowInRange, getPinStateForColumn, reorderColumnArray, calculateDropTarget, computeVisibleRange, computeTotalHeight, getScrollTopForRow, getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, debounce, measureRange, injectGlobalStyles, computeNextSortState, measureColumnContentWidth, AUTOSIZE_EXTRA_PX, AUTOSIZE_MAX_PX, findCtrlArrowTarget, computeTabNavigation, computeArrowNavigation, applyCellDeletion, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, applyRangeRowSelection, computeRowSelectionState, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear, applyFillValues, UndoRedoStack, validateColumns, validateRowIds, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, DEFAULT_DEBOUNCE_MS, PEOPLE_SEARCH_DEBOUNCE_MS, SIDEBAR_TRANSITION_MS, Z_INDEX, } from '@alaarab/ogrid-angular';
+export type { IColumnDef, IColumnGroupDef, IColumnDefinition, IOGridProps, IOGridClientProps, IOGridServerProps, IOGridDataGridProps, ColumnChooserPlacement, OGridPagination, OGridColumnChooser, OGridFilters, OGridSideBarState, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, DataGridStateResult, SideBarProps, SideBarFilterColumn, IColumnHeaderFilterProps, IColumnChooserProps, } from '@alaarab/ogrid-angular';
+export { OGridService, DataGridStateService, DataGridLayoutHelper, DataGridEditingHelper, DataGridInteractionHelper, ColumnReorderService, VirtualScrollService, OGridLayoutComponent, StatusBarComponent, GridContextMenuComponent, SideBarComponent, MarchingAntsOverlayComponent, EmptyStateComponent, BaseOGridComponent, BaseDataGridTableComponent, BaseColumnHeaderFilterComponent, BaseColumnChooserComponent, BasePaginationControlsComponent, BaseInlineCellEditorComponent, INLINE_CELL_EDITOR_TEMPLATE, INLINE_CELL_EDITOR_STYLES, BasePopoverCellEditorComponent, POPOVER_CELL_EDITOR_TEMPLATE, POPOVER_CELL_EDITOR_OVERLAY_STYLES, OGRID_THEME_VARS_CSS, createDebouncedSignal, createDebouncedCallback, createLatestCallback, } 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-material",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "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",
@@ -9,11 +9,11 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/esm/index.js"
+      "default": "./dist/esm/index.js"
     }
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json",
     "test": "jest --passWithNoTests",
     "storybook": "ng run angular-material:storybook",
     "build-storybook": "ng run angular-material:build-storybook"
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.1.2"
+    "@alaarab/ogrid-angular": "2.1.4"
   },
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",

package/dist/esm/column-chooser/column-chooser.component.js

@@ -1,121 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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, ChangeDetectionStrategy } from '@angular/core';
-import { BaseColumnChooserComponent } from '@alaarab/ogrid-angular';
-/**
- * Column visibility chooser dropdown using Angular Material styling.
- * Standalone component with inline template.
- */
-let ColumnChooserComponent = class ColumnChooserComponent extends BaseColumnChooserComponent {
-    onDocumentClick(event) {
-        const el = event.target;
-        if (!el.closest('ogrid-column-chooser')) {
-            this.isOpen.set(false);
-        }
-    }
-};
-ColumnChooserComponent = __decorate([
-    Component({
-        selector: 'ogrid-column-chooser',
-        standalone: true,
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        template: `
-    <div class="ogrid-column-chooser">
-      <button
-        class="ogrid-column-chooser__trigger"
-        (click)="toggle()"
-        [attr.aria-expanded]="isOpen()"
-        aria-haspopup="listbox"
-      >
-        &#9638; Column Visibility ({{ visibleCount() }} of {{ totalCount() }})
-        <span class="ogrid-column-chooser__caret">{{ isOpen() ? '&#9650;' : '&#9660;' }}</span>
-      </button>
-
-      @if (isOpen()) {
-        <div class="ogrid-column-chooser__dropdown" (click)="$event.stopPropagation()">
-          <div class="ogrid-column-chooser__header">
-            Select Columns ({{ visibleCount() }} of {{ totalCount() }})
-          </div>
-
-          <div class="ogrid-column-chooser__list">
-            @for (col of columns; track col.columnId) {
-              <label class="ogrid-column-chooser__item">
-                <input
-                  type="checkbox"
-                  [checked]="visibleColumns.has(col.columnId)"
-                  (change)="onCheckboxChange(col.columnId, $event)"
-                />
-                <span>{{ col.name }}</span>
-              </label>
-            }
-          </div>
-
-          <div class="ogrid-column-chooser__footer">
-            <button class="ogrid-column-chooser__btn" (click)="onClearAll()">Clear All</button>
-            <button class="ogrid-column-chooser__btn ogrid-column-chooser__btn--primary" (click)="selectAll()">Select All</button>
-          </div>
-        </div>
-      }
-    </div>
-  `,
-        styles: [`
-    :host { display: inline-flex; position: relative; }
-    .ogrid-column-chooser { position: relative; }
-    .ogrid-column-chooser__trigger {
-      display: inline-flex; align-items: center; gap: 6px;
-      padding: 6px 12px; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23)); border-radius: 4px;
-      background: transparent; cursor: pointer; font-size: 14px; font-weight: 600;
-      text-transform: none; white-space: nowrap;
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-column-chooser__trigger:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
-    .ogrid-column-chooser__caret { font-size: 10px; }
-    .ogrid-column-chooser__dropdown {
-      position: absolute; top: 100%; right: 0; z-index: 1000;
-      min-width: 220px; margin-top: 4px;
-      background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)); border-radius: 4px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    }
-    .ogrid-column-chooser__header {
-      padding: 8px 12px; font-size: 14px; font-weight: 600;
-      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-column-chooser__list {
-      max-height: 320px; overflow-y: auto; padding: 4px 0;
-    }
-    .ogrid-column-chooser__item {
-      display: flex; align-items: center; gap: 8px;
-      padding: 4px 12px; min-height: 32px; cursor: pointer; font-size: 14px;
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-column-chooser__item:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
-    .ogrid-column-chooser__footer {
-      display: flex; justify-content: flex-end; gap: 8px;
-      padding: 8px 12px; border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      background: var(--ogrid-header-bg, rgba(0, 0, 0, 0.04));
-    }
-    .ogrid-column-chooser__btn {
-      padding: 4px 12px; border: none; border-radius: 4px;
-      background: transparent; cursor: pointer; font-size: 13px; text-transform: none;
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-column-chooser__btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
-    .ogrid-column-chooser__btn--primary {
-      background: var(--mat-sys-primary, #1976d2); color: #fff;
-    }
-    .ogrid-column-chooser__btn--primary:hover {
-      opacity: 0.9;
-    }
-  `],
-        host: {
-            '(document:click)': 'onDocumentClick($event)',
-        },
-    })
-], ColumnChooserComponent);
-export { ColumnChooserComponent };

package/dist/esm/column-header-filter/column-header-filter.component.js

@@ -1,325 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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, ChangeDetectionStrategy, ViewChild } from '@angular/core';
-import { BaseColumnHeaderFilterComponent } from '@alaarab/ogrid-angular';
-/**
- * Column header filter component with sort + filter icon + popover.
- * Standalone component with inline template.
- */
-let ColumnHeaderFilterComponent = class ColumnHeaderFilterComponent extends BaseColumnHeaderFilterComponent {
-    getHeaderEl() {
-        return this.headerEl;
-    }
-    onDocumentClickWrapper(event) {
-        this.onDocumentClick(event, 'ogrid-column-header-filter');
-    }
-};
-__decorate([
-    ViewChild('headerEl')
-], ColumnHeaderFilterComponent.prototype, "headerEl", void 0);
-ColumnHeaderFilterComponent = __decorate([
-    Component({
-        selector: 'ogrid-column-header-filter',
-        standalone: true,
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        template: `
-    <div class="ogrid-header-filter" #headerEl>
-      <div class="ogrid-header-filter__label">
-        <span class="ogrid-header-filter__name" [title]="columnName" data-header-label>
-          {{ columnName }}
-        </span>
-      </div>
-
-      <div class="ogrid-header-filter__actions">
-        @if (filterType !== 'none') {
-          <button
-            class="ogrid-header-filter__filter-btn"
-            [class.ogrid-header-filter__filter-btn--active]="hasActiveFilter() || isFilterOpen()"
-            (click)="toggleFilter($event)"
-            [attr.aria-label]="'Filter ' + columnName"
-            [title]="'Filter ' + columnName"
-          >
-            <span class="ogrid-header-filter__funnel"></span>
-            @if (hasActiveFilter()) {
-              <span class="ogrid-header-filter__dot"></span>
-            }
-          </button>
-        }
-      </div>
-    </div>
-
-    @if (isFilterOpen() && filterType !== 'none') {
-      <div
-        class="ogrid-header-filter__popover"
-        [style.top.px]="popoverTop()"
-        [style.left.px]="popoverLeft()"
-        (click)="$event.stopPropagation()"
-      >
-        <div class="ogrid-header-filter__popover-header">
-          Filter: {{ columnName }}
-        </div>
-
-        @switch (filterType) {
-          @case ('text') {
-            <div class="ogrid-header-filter__popover-body" style="width: 260px;">
-              <div style="padding: 12px;">
-                <input
-                  type="text"
-                  class="ogrid-header-filter__input"
-                  placeholder="Enter search term..."
-                  [value]="tempTextValue()"
-                  (input)="tempTextValue.set(asInputValue($event))"
-                  (keydown)="onTextKeydown($event)"
-                  autocomplete="off"
-                />
-              </div>
-              <div class="ogrid-header-filter__popover-actions">
-                <button class="ogrid-header-filter__action-btn" [disabled]="!tempTextValue()" (click)="handleTextClear()">Clear</button>
-                <button class="ogrid-header-filter__action-btn ogrid-header-filter__action-btn--primary" (click)="handleTextApply()">Apply</button>
-              </div>
-            </div>
-          }
-          @case ('multiSelect') {
-            <div class="ogrid-header-filter__popover-body" style="width: 280px;">
-              <div style="padding: 12px 12px 4px;">
-                <input
-                  type="text"
-                  class="ogrid-header-filter__input"
-                  placeholder="Search..."
-                  [value]="searchText()"
-                  (input)="searchText.set(asInputValue($event))"
-                  (keydown)="$event.stopPropagation()"
-                  autocomplete="off"
-                />
-                <div class="ogrid-header-filter__options-info">
-                  {{ filteredOptions().length }} of {{ (options ?? []).length }} options
-                </div>
-              </div>
-              <div class="ogrid-header-filter__select-actions">
-                <button class="ogrid-header-filter__action-btn" (click)="handleSelectAllFiltered()">
-                  Select All ({{ filteredOptions().length }})
-                </button>
-                <button class="ogrid-header-filter__action-btn" (click)="handleClearSelection()">Clear</button>
-              </div>
-              <div class="ogrid-header-filter__options-list">
-                @if (isLoadingOptions) {
-                  <div class="ogrid-header-filter__loading">Loading...</div>
-                } @else if (filteredOptions().length === 0) {
-                  <div class="ogrid-header-filter__empty">No options found</div>
-                } @else {
-                  @for (option of filteredOptions(); track option) {
-                    <label class="ogrid-header-filter__option">
-                      <input
-                        type="checkbox"
-                        [checked]="tempSelected().has(option)"
-                        (change)="handleCheckboxChange(option, $event)"
-                      />
-                      <span>{{ option }}</span>
-                    </label>
-                  }
-                }
-              </div>
-              <div class="ogrid-header-filter__popover-actions" style="border-top: 1px solid rgba(0,0,0,0.12);">
-                <button class="ogrid-header-filter__action-btn" (click)="handleClearSelection()">Clear</button>
-                <button class="ogrid-header-filter__action-btn ogrid-header-filter__action-btn--primary" (click)="handleApplyMultiSelect()">Apply</button>
-              </div>
-            </div>
-          }
-          @case ('people') {
-            <div class="ogrid-header-filter__popover-body" style="width: 300px;">
-              @if (selectedUser) {
-                <div class="ogrid-header-filter__people-selected">
-                  <div class="ogrid-header-filter__people-info-label">Currently filtered by:</div>
-                  <div class="ogrid-header-filter__people-card">
-                    <div class="ogrid-header-filter__people-avatar">{{ selectedUser!.displayName?.[0] ?? '?' }}</div>
-                    <div class="ogrid-header-filter__people-details">
-                      <div>{{ selectedUser!.displayName }}</div>
-                      <div class="ogrid-header-filter__people-email">{{ selectedUser!.email }}</div>
-                    </div>
-                    <button class="ogrid-header-filter__btn" (click)="handleClearUser()" aria-label="Remove filter">&times;</button>
-                  </div>
-                </div>
-              }
-              <div style="padding: 12px 12px 4px;">
-                <input
-                  type="text"
-                  class="ogrid-header-filter__input"
-                  placeholder="Search for a person..."
-                  [value]="peopleSearchText()"
-                  (input)="onPeopleSearchInput($event)"
-                  (keydown)="$event.stopPropagation()"
-                  autocomplete="off"
-                />
-              </div>
-              <div class="ogrid-header-filter__options-list">
-                @if (isPeopleLoading() && peopleSearchText().trim()) {
-                  <div class="ogrid-header-filter__loading">Loading...</div>
-                } @else if (peopleSuggestions().length === 0 && peopleSearchText().trim()) {
-                  <div class="ogrid-header-filter__empty">No results found</div>
-                } @else if (peopleSearchText().trim()) {
-                  @for (user of peopleSuggestions(); track user.id || user.email || user.displayName) {
-                    <div class="ogrid-header-filter__people-option" (click)="handleUserSelect(user)">
-                      <div class="ogrid-header-filter__people-avatar">{{ user.displayName?.[0] ?? '?' }}</div>
-                      <div class="ogrid-header-filter__people-details">
-                        <div>{{ user.displayName }}</div>
-                        <div class="ogrid-header-filter__people-email">{{ user.email }}</div>
-                      </div>
-                    </div>
-                  }
-                } @else {
-                  <div class="ogrid-header-filter__empty">Type to search...</div>
-                }
-              </div>
-              @if (selectedUser) {
-                <div style="padding: 8px 12px; border-top: 1px solid rgba(0,0,0,0.12);">
-                  <button class="ogrid-header-filter__action-btn" style="width: 100%;" (click)="handleClearUser()">Clear Filter</button>
-                </div>
-              }
-            </div>
-          }
-          @case ('date') {
-            <div class="ogrid-header-filter__popover-body" style="padding: 12px; display: flex; flex-direction: column; gap: 8px;">
-              <div style="display: flex; align-items: center; gap: 8px;">
-                <span style="min-width: 36px; font-size: 12px;">From:</span>
-                <input type="date" [value]="tempDateFrom()" (input)="tempDateFrom.set(asInputValue($event))" style="flex: 1; padding: 4px 6px;" />
-              </div>
-              <div style="display: flex; align-items: center; gap: 8px;">
-                <span style="min-width: 36px; font-size: 12px;">To:</span>
-                <input type="date" [value]="tempDateTo()" (input)="tempDateTo.set(asInputValue($event))" style="flex: 1; padding: 4px 6px;" />
-              </div>
-              <div class="ogrid-header-filter__popover-actions" style="margin-top: 4px;">
-                <button class="ogrid-header-filter__action-btn" [disabled]="!tempDateFrom() && !tempDateTo()" (click)="handleDateClear()">Clear</button>
-                <button class="ogrid-header-filter__action-btn ogrid-header-filter__action-btn--primary" (click)="handleDateApply()">Apply</button>
-              </div>
-            </div>
-          }
-        }
-      </div>
-    }
-  `,
-        styles: [`
-    :host { display: flex; align-items: center; flex: 1; min-width: 0; position: relative; }
-    .ogrid-header-filter { display: flex; align-items: center; width: 100%; min-width: 0; }
-    .ogrid-header-filter__label { flex: 1; min-width: 0; overflow: hidden; }
-    .ogrid-header-filter__name {
-      display: block; font-weight: 600; font-size: 14px; line-height: 1.4;
-      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-    }
-    .ogrid-header-filter__actions { display: flex; align-items: center; margin-left: 4px; flex-shrink: 0; }
-    .ogrid-header-filter__btn {
-      width: 24px; height: 24px; padding: 2px; border: none; border-radius: 4px;
-      background: transparent; cursor: pointer; font-size: 12px; line-height: 1;
-      display: inline-flex; align-items: center; justify-content: center; position: relative;
-      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));
-    }
-    .ogrid-header-filter__btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); }
-    .ogrid-header-filter__btn--active { color: var(--mat-sys-primary, #1976d2); }
-    .ogrid-header-filter__filter-btn {
-      width: 24px; height: 24px; padding: 2px; border: none; border-radius: 4px;
-      background: transparent; cursor: pointer; line-height: 1;
-      display: inline-flex; align-items: center; justify-content: center; position: relative;
-      opacity: 0.6; transition: opacity 0.15s;
-    }
-    .ogrid-header-filter:hover .ogrid-header-filter__filter-btn { opacity: 0.8; }
-    .ogrid-header-filter__filter-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); opacity: 1 !important; }
-    .ogrid-header-filter__filter-btn--active { opacity: 1 !important; }
-    .ogrid-header-filter__funnel {
-      display: block; width: 0; height: 0;
-      border-left: 5px solid transparent; border-right: 5px solid transparent;
-      border-top: 6px solid var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.65));
-      position: relative;
-    }
-    .ogrid-header-filter__funnel::after {
-      content: ''; display: block; width: 2px; height: 4px;
-      background: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.65)); position: absolute;
-      top: -1px; left: -1px;
-    }
-    .ogrid-header-filter__filter-btn--active .ogrid-header-filter__funnel {
-      border-top-color: var(--mat-sys-primary, #1976d2);
-    }
-    .ogrid-header-filter__filter-btn--active .ogrid-header-filter__funnel::after {
-      background: var(--mat-sys-primary, #1976d2);
-    }
-    .ogrid-header-filter__dot {
-      position: absolute; top: 2px; right: 2px;
-      width: 6px; height: 6px; border-radius: 50%;
-      background: var(--mat-sys-primary, #1976d2);
-    }
-    .ogrid-header-filter__popover {
-      position: fixed; z-index: 1000;
-      background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.2));
-      border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);
-      margin-top: 4px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-header-filter__popover-header {
-      padding: 8px 12px; font-size: 14px; font-weight: 600;
-      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-header-filter__popover-body { }
-    .ogrid-header-filter__popover-actions {
-      display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px;
-    }
-    .ogrid-header-filter__input {
-      width: 100%; padding: 8px 12px; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23));
-      border-radius: 4px; font-size: 14px; box-sizing: border-box;
-      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-header-filter__input:focus { outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -1px; }
-    .ogrid-header-filter__options-info { margin-top: 4px; font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
-    .ogrid-header-filter__select-actions {
-      display: flex; justify-content: space-between; padding: 4px 12px;
-    }
-    .ogrid-header-filter__options-list { max-height: 240px; overflow-y: auto; padding: 0 4px; }
-    .ogrid-header-filter__option {
-      display: flex; align-items: center; gap: 8px;
-      padding: 4px 8px; cursor: pointer; font-size: 14px;
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-header-filter__option:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
-    .ogrid-header-filter__loading, .ogrid-header-filter__empty {
-      padding: 16px; text-align: center; font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
-    }
-    .ogrid-header-filter__action-btn {
-      padding: 4px 12px; border: none; border-radius: 4px;
-      background: transparent; cursor: pointer; font-size: 13px;
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-header-filter__action-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
-    .ogrid-header-filter__action-btn:disabled { opacity: 0.38; cursor: default; }
-    .ogrid-header-filter__action-btn--primary {
-      background: var(--mat-sys-primary, #1976d2); color: #fff;
-    }
-    .ogrid-header-filter__action-btn--primary:hover { opacity: 0.9; }
-    .ogrid-header-filter__people-selected {
-      padding: 12px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-    }
-    .ogrid-header-filter__people-info-label { font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
-    .ogrid-header-filter__people-card {
-      display: flex; align-items: center; gap: 8px; margin-top: 4px;
-    }
-    .ogrid-header-filter__people-avatar {
-      width: 32px; height: 32px; border-radius: 50%; background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));
-      display: flex; align-items: center; justify-content: center;
-      font-size: 14px; font-weight: 600; flex-shrink: 0;
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-header-filter__people-details { flex: 1; min-width: 0; font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }
-    .ogrid-header-filter__people-details > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .ogrid-header-filter__people-email { font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }
-    .ogrid-header-filter__people-option {
-      display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-    .ogrid-header-filter__people-option:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
-  `],
-        host: {
-            '(document:click)': 'onDocumentClickWrapper($event)',
-        },
-    })
-], ColumnHeaderFilterComponent);
-export { ColumnHeaderFilterComponent };

package/dist/esm/column-header-menu/column-header-menu.component.js

@@ -1,144 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    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, ChangeDetectionStrategy, ViewChild, computed, Input, signal } from '@angular/core';
-import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import { MatDividerModule } from '@angular/material/divider';
-import { getColumnHeaderMenuItems } from '@alaarab/ogrid-angular';
-/**
- * Column header dropdown menu for pin/unpin, sort, and autosize actions.
- * Uses Angular Material MatMenu.
- *
- * Uses signal-backed @Input setters so that computed() tracks changes
- * (plain @Input properties are not reactive in Angular signals).
- */
-let ColumnHeaderMenuComponent = class ColumnHeaderMenuComponent {
-    constructor() {
-        // Signal-backed inputs so computed() tracks changes reactively
-        this._canPinLeft = signal(true);
-        this._canPinRight = signal(true);
-        this._canUnpin = signal(false);
-        this._currentSort = signal(null);
-        this._isSortable = signal(true);
-        this._isResizable = signal(true);
-        this.handlers = {};
-        this.menuItems = computed(() => getColumnHeaderMenuItems({
-            canPinLeft: this._canPinLeft(),
-            canPinRight: this._canPinRight(),
-            canUnpin: this._canUnpin(),
-            currentSort: this._currentSort(),
-            isSortable: this._isSortable(),
-            isResizable: this._isResizable(),
-        }));
-    }
-    set canPinLeft(v) { this._canPinLeft.set(v); }
-    set canPinRight(v) { this._canPinRight.set(v); }
-    set canUnpin(v) { this._canUnpin.set(v); }
-    set currentSort(v) { this._currentSort.set(v); }
-    set isSortable(v) { this._isSortable.set(v); }
-    set isResizable(v) { this._isResizable.set(v); }
-    handleMenuItemClick(itemId) {
-        const h = this.handlers;
-        const actionMap = {
-            pinLeft: h.onPinLeft,
-            pinRight: h.onPinRight,
-            unpin: h.onUnpin,
-            sortAsc: h.onSortAsc,
-            sortDesc: h.onSortDesc,
-            clearSort: h.onClearSort,
-            autosizeThis: h.onAutosizeThis,
-            autosizeAll: h.onAutosizeAll,
-        };
-        const action = actionMap[itemId];
-        if (action) {
-            action();
-            h.onClose?.();
-        }
-    }
-};
-__decorate([
-    Input({ required: true })
-], ColumnHeaderMenuComponent.prototype, "columnId", void 0);
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "canPinLeft", null);
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "canPinRight", null);
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "canUnpin", null);
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "currentSort", null);
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "isSortable", null);
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "isResizable", null);
-__decorate([
-    Input()
-], ColumnHeaderMenuComponent.prototype, "handlers", void 0);
-__decorate([
-    ViewChild(MatMenuTrigger)
-], ColumnHeaderMenuComponent.prototype, "menuTrigger", void 0);
-ColumnHeaderMenuComponent = __decorate([
-    Component({
-        selector: 'column-header-menu',
-        standalone: true,
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        imports: [MatMenuModule, MatDividerModule],
-        template: `
-    <button
-      [matMenuTriggerFor]="menu"
-      class="column-header-menu-trigger"
-      [attr.aria-label]="'Column options for ' + columnId"
-    >
-      &#8942;
-    </button>
-
-    <mat-menu #menu="matMenu">
-      @for (item of menuItems(); track item.id) {
-        <button
-          mat-menu-item
-          [disabled]="item.disabled"
-          (click)="handleMenuItemClick(item.id)"
-        >
-          {{ item.label }}
-        </button>
-        @if (item.divider) {
-          <mat-divider></mat-divider>
-        }
-      }
-    </mat-menu>
-  `,
-        styles: [`
-    :host { flex-shrink: 0; }
-    .column-header-menu-trigger {
-      width: 24px;
-      height: 24px;
-      padding: 0;
-      border: none;
-      border-radius: 4px;
-      background: transparent;
-      cursor: pointer;
-      font-size: 16px;
-      line-height: 1;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));
-    }
-
-    .column-header-menu-trigger:hover {
-      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
-    }
-  `],
-    })
-], ColumnHeaderMenuComponent);
-export { ColumnHeaderMenuComponent };