@alaarab/ogrid-angular-material 2.0.9 → 2.0.12

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

@@ -4,43 +4,14 @@ 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, computed, ChangeDetectionStrategy } from '@angular/core';
+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 {
-    constructor() {
-        this.columns = input.required();
-        this.visibleColumns = input.required();
-        this.visibilityChange = output();
-        this.isOpen = signal(false);
-        this.visibleCount = computed(() => this.visibleColumns().size);
-        this.totalCount = computed(() => this.columns().length);
-    }
-    toggle() {
-        this.isOpen.update((v) => !v);
-    }
-    onCheckboxChange(columnKey, event) {
-        const checked = event.target.checked;
-        this.visibilityChange.emit({ columnKey, visible: checked });
-    }
-    selectAll() {
-        for (const col of this.columns()) {
-            if (!this.visibleColumns().has(col.columnId)) {
-                this.visibilityChange.emit({ columnKey: col.columnId, visible: true });
-            }
-        }
-    }
-    clearAll() {
-        for (const col of this.columns()) {
-            if (this.visibleColumns().has(col.columnId)) {
-                this.visibilityChange.emit({ columnKey: col.columnId, visible: false });
-            }
-        }
-    }
+let ColumnChooserComponent = class ColumnChooserComponent extends BaseColumnChooserComponent {
     onDocumentClick(event) {
-        // Close dropdown when clicking outside
         const el = event.target;
         if (!el.closest('ogrid-column-chooser')) {
             this.isOpen.set(false);
@@ -71,11 +42,11 @@ ColumnChooserComponent = __decorate([
           </div>
 
           <div class="ogrid-column-chooser__list">
-            @for (col of columns(); track col.columnId) {
+            @for (col of columns; track col.columnId) {
               <label class="ogrid-column-chooser__item">
                 <input
                   type="checkbox"
-                  [checked]="visibleColumns().has(col.columnId)"
+                  [checked]="visibleColumns.has(col.columnId)"
                   (change)="onCheckboxChange(col.columnId, $event)"
                 />
                 <span>{{ col.name }}</span>
@@ -96,20 +67,24 @@ ColumnChooserComponent = __decorate([
     .ogrid-column-chooser { position: relative; }
     .ogrid-column-chooser__trigger {
       display: inline-flex; align-items: center; gap: 6px;
-      padding: 6px 12px; border: 1px solid rgba(0,0,0,0.23); border-radius: 4px;
+      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: 10;
       min-width: 220px; margin-top: 4px;
-      background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 4px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+      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 rgba(0,0,0,0.12); background: #fafafa;
+      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;
@@ -117,22 +92,25 @@ ColumnChooserComponent = __decorate([
     .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: rgba(0,0,0,0.04); }
+    .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 rgba(0,0,0,0.12); background: #fafafa;
+      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: rgba(0,0,0,0.04); }
+    .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 {
-      background: var(--mat-sys-primary, #1565c0);
+      opacity: 0.9;
     }
   `],
         host: {

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

@@ -4,195 +4,23 @@ 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, signal, computed, ChangeDetectionStrategy, viewChild, } from '@angular/core';
+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 {
-    constructor() {
-        this.columnKey = input.required();
-        this.columnName = input.required();
-        this.filterType = input.required();
-        this.isSorted = input(false);
-        this.isSortedDescending = input(false);
-        this.onSort = input(undefined);
-        this.selectedValues = input(undefined);
-        this.onFilterChange = input(undefined);
-        this.options = input(undefined);
-        this.isLoadingOptions = input(false);
-        this.textValue = input('');
-        this.onTextChange = input(undefined);
-        this.selectedUser = input(undefined);
-        this.onUserChange = input(undefined);
-        this.peopleSearch = input(undefined);
-        this.dateValue = input(undefined);
-        this.onDateChange = input(undefined);
-        this.headerEl = viewChild('headerEl');
-        // Internal state
-        this.isFilterOpen = signal(false);
-        this.tempTextValue = signal('');
-        this.searchText = signal('');
-        this.tempSelected = signal(new Set());
-        this.peopleSearchText = signal('');
-        this.peopleSuggestions = signal([]);
-        this.isPeopleLoading = signal(false);
-        this.tempDateFrom = signal('');
-        this.tempDateTo = signal('');
-        // Popover position
-        this.popoverTop = signal(0);
-        this.popoverLeft = signal(0);
-        this.peopleDebounceTimer = null;
-        this.hasActiveFilter = computed(() => {
-            const ft = this.filterType();
-            if (ft === 'text')
-                return !!this.textValue();
-            if (ft === 'multiSelect')
-                return (this.selectedValues()?.length ?? 0) > 0;
-            if (ft === 'people')
-                return this.selectedUser() != null;
-            if (ft === 'date')
-                return this.dateValue() != null;
-            return false;
-        });
-        this.filteredOptions = computed(() => {
-            const opts = this.options() ?? [];
-            const search = this.searchText().toLowerCase().trim();
-            if (!search)
-                return opts;
-            return opts.filter((o) => o.toLowerCase().includes(search));
-        });
+let ColumnHeaderFilterComponent = class ColumnHeaderFilterComponent extends BaseColumnHeaderFilterComponent {
+    getHeaderEl() {
+        return this.headerEl;
     }
-    asInputValue(event) {
-        return event.target.value;
-    }
-    toggleFilter(event) {
-        event.stopPropagation();
-        if (this.isFilterOpen()) {
-            this.isFilterOpen.set(false);
-            return;
-        }
-        // Initialize temp state from current values
-        this.tempTextValue.set(this.textValue());
-        this.tempSelected.set(new Set(this.selectedValues() ?? []));
-        this.searchText.set('');
-        this.peopleSearchText.set('');
-        this.peopleSuggestions.set([]);
-        const dv = this.dateValue();
-        this.tempDateFrom.set(dv?.from ?? '');
-        this.tempDateTo.set(dv?.to ?? '');
-        // Compute popover position
-        const el = this.headerEl()?.nativeElement;
-        if (el) {
-            const rect = el.getBoundingClientRect();
-            this.popoverTop.set(rect.bottom + 4);
-            this.popoverLeft.set(rect.left);
-        }
-        this.isFilterOpen.set(true);
-    }
-    // --- Text filter ---
-    onTextKeydown(event) {
-        event.stopPropagation();
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            this.handleTextApply();
-        }
-    }
-    handleTextApply() {
-        this.onTextChange()(this.tempTextValue());
-        this.isFilterOpen.set(false);
-    }
-    handleTextClear() {
-        this.tempTextValue.set('');
-        this.onTextChange()('');
-        this.isFilterOpen.set(false);
-    }
-    // --- MultiSelect filter ---
-    handleCheckboxChange(option, event) {
-        const checked = event.target.checked;
-        this.tempSelected.update((s) => {
-            const next = new Set(s);
-            if (checked)
-                next.add(option);
-            else
-                next.delete(option);
-            return next;
-        });
-    }
-    handleSelectAllFiltered() {
-        this.tempSelected.update((s) => {
-            const next = new Set(s);
-            for (const opt of this.filteredOptions())
-                next.add(opt);
-            return next;
-        });
-    }
-    handleClearSelection() {
-        this.tempSelected.set(new Set());
-    }
-    handleApplyMultiSelect() {
-        this.onFilterChange()(Array.from(this.tempSelected()));
-        this.isFilterOpen.set(false);
-    }
-    // --- People filter ---
-    onPeopleSearchInput(event) {
-        const value = event.target.value;
-        this.peopleSearchText.set(value);
-        if (this.peopleDebounceTimer)
-            clearTimeout(this.peopleDebounceTimer);
-        const query = value.trim();
-        if (!query) {
-            this.peopleSuggestions.set([]);
-            this.isPeopleLoading.set(false);
-            return;
-        }
-        this.isPeopleLoading.set(true);
-        this.peopleDebounceTimer = setTimeout(() => {
-            const fn = this.peopleSearch();
-            if (!fn)
-                return;
-            fn(query).then((results) => {
-                this.peopleSuggestions.set(results);
-                this.isPeopleLoading.set(false);
-            }).catch(() => {
-                this.peopleSuggestions.set([]);
-                this.isPeopleLoading.set(false);
-            });
-        }, 300);
-    }
-    handleUserSelect(user) {
-        this.onUserChange()(user);
-        this.isFilterOpen.set(false);
-    }
-    handleClearUser() {
-        this.onUserChange()(undefined);
-        this.isFilterOpen.set(false);
-    }
-    // --- Date filter ---
-    handleDateApply() {
-        const from = this.tempDateFrom();
-        const to = this.tempDateTo();
-        if (!from && !to) {
-            this.onDateChange()(undefined);
-        }
-        else {
-            this.onDateChange()({ from: from || undefined, to: to || undefined });
-        }
-        this.isFilterOpen.set(false);
-    }
-    handleDateClear() {
-        this.tempDateFrom.set('');
-        this.tempDateTo.set('');
-        this.onDateChange()(undefined);
-        this.isFilterOpen.set(false);
-    }
-    onDocumentClick(event) {
-        const el = event.target;
-        if (!el.closest('ogrid-column-header-filter') && !el.closest('.ogrid-header-filter__popover')) {
-            this.isFilterOpen.set(false);
-        }
+    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',
@@ -201,23 +29,23 @@ ColumnHeaderFilterComponent = __decorate([
         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 class="ogrid-header-filter__name" [title]="columnName" data-header-label>
+          {{ columnName }}
         </span>
       </div>
 
       <div class="ogrid-header-filter__actions">
-        @if (onSort()) {
+        @if (onSort) {
           <button
             class="ogrid-header-filter__btn"
-            [class.ogrid-header-filter__btn--active]="isSorted()"
-            (click)="onSort()!()"
-            [attr.aria-label]="'Sort by ' + columnName()"
-            [title]="isSorted() ? (isSortedDescending() ? 'Sorted descending' : 'Sorted ascending') : 'Sort'"
+            [class.ogrid-header-filter__btn--active]="isSorted"
+            (click)="onSort!()"
+            [attr.aria-label]="'Sort by ' + columnName"
+            [title]="isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort'"
           >
-            @if (isSorted() && isSortedDescending()) {
+            @if (isSorted && isSortedDescending) {
               &#9660;
-            } @else if (isSorted()) {
+            } @else if (isSorted) {
               &#9650;
             } @else {
               &#8597;
@@ -225,15 +53,15 @@ ColumnHeaderFilterComponent = __decorate([
           </button>
         }
 
-        @if (filterType() !== 'none') {
+        @if (filterType !== 'none') {
           <button
-            class="ogrid-header-filter__btn"
-            [class.ogrid-header-filter__btn--active]="hasActiveFilter() || isFilterOpen()"
+            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()"
+            [attr.aria-label]="'Filter ' + columnName"
+            [title]="'Filter ' + columnName"
           >
-            &#9783;
+            <span class="ogrid-header-filter__funnel"></span>
             @if (hasActiveFilter()) {
               <span class="ogrid-header-filter__dot"></span>
             }
@@ -242,7 +70,7 @@ ColumnHeaderFilterComponent = __decorate([
       </div>
     </div>
 
-    @if (isFilterOpen() && filterType() !== 'none') {
+    @if (isFilterOpen() && filterType !== 'none') {
       <div
         class="ogrid-header-filter__popover"
         [style.top.px]="popoverTop()"
@@ -250,10 +78,10 @@ ColumnHeaderFilterComponent = __decorate([
         (click)="$event.stopPropagation()"
       >
         <div class="ogrid-header-filter__popover-header">
-          Filter: {{ columnName() }}
+          Filter: {{ columnName }}
         </div>
 
-        @switch (filterType()) {
+        @switch (filterType) {
           @case ('text') {
             <div class="ogrid-header-filter__popover-body" style="width: 260px;">
               <div style="padding: 12px;">
@@ -286,7 +114,7 @@ ColumnHeaderFilterComponent = __decorate([
                   autocomplete="off"
                 />
                 <div class="ogrid-header-filter__options-info">
-                  {{ filteredOptions().length }} of {{ (options() ?? []).length }} options
+                  {{ filteredOptions().length }} of {{ (options ?? []).length }} options
                 </div>
               </div>
               <div class="ogrid-header-filter__select-actions">
@@ -296,7 +124,7 @@ ColumnHeaderFilterComponent = __decorate([
                 <button class="ogrid-header-filter__action-btn" (click)="handleClearSelection()">Clear</button>
               </div>
               <div class="ogrid-header-filter__options-list">
-                @if (isLoadingOptions()) {
+                @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>
@@ -321,14 +149,14 @@ ColumnHeaderFilterComponent = __decorate([
           }
           @case ('people') {
             <div class="ogrid-header-filter__popover-body" style="width: 300px;">
-              @if (selectedUser()) {
+              @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-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>{{ 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>
@@ -364,7 +192,7 @@ ColumnHeaderFilterComponent = __decorate([
                   <div class="ogrid-header-filter__empty">Type to search...</div>
                 }
               </div>
-              @if (selectedUser()) {
+              @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>
@@ -392,7 +220,7 @@ ColumnHeaderFilterComponent = __decorate([
     }
   `,
         styles: [`
-    :host { display: flex; align-items: center; width: 100%; min-width: 0; position: relative; }
+    :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 {
@@ -404,35 +232,63 @@ ColumnHeaderFilterComponent = __decorate([
       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: rgba(0,0,0,0.54);
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));
     }
-    .ogrid-header-filter__btn:hover { background: rgba(0,0,0,0.04); }
+    .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: #fff; border: 1px solid rgba(0,0,0,0.12);
-      border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-      margin-top: 4px;
+      position: fixed; z-index: 10000;
+      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 rgba(0,0,0,0.12);
+      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 rgba(0,0,0,0.23);
+      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: rgba(0,0,0,0.6); }
+    .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;
     }
@@ -440,43 +296,47 @@ ColumnHeaderFilterComponent = __decorate([
     .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: rgba(0,0,0,0.04); }
+    .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: rgba(0,0,0,0.6);
+      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: rgba(0,0,0,0.04); }
+    .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 { background: var(--mat-sys-primary, #1565c0); }
+    .ogrid-header-filter__action-btn--primary:hover { opacity: 0.9; }
     .ogrid-header-filter__people-selected {
-      padding: 12px; border-bottom: 1px solid rgba(0,0,0,0.12);
+      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: rgba(0,0,0,0.6); }
+    .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: rgba(0,0,0,0.08);
+      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; }
+    .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: rgba(0,0,0,0.6); }
+    .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: rgba(0,0,0,0.04); }
+    .ogrid-header-filter__people-option:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }
   `],
         host: {
-            '(document:click)': 'onDocumentClick($event)',
+            '(document:click)': 'onDocumentClickWrapper($event)',
         },
     })
 ], ColumnHeaderFilterComponent);