@alaarab/ogrid-angular-primeng 2.0.9 → 2.0.12

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

@@ -4,33 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, output, signal, computed } from '@angular/core';
+import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
-let ColumnChooserComponent = class ColumnChooserComponent {
-    constructor() {
-        this.columns = input.required();
-        this.visibleColumns = input.required();
-        this.visibilityChange = output();
-        this.open = signal(false);
-        this.visibleCount = computed(() => this.visibleColumns().size);
-        this.totalCount = computed(() => this.columns().length);
-    }
-    onToggle(columnKey, checked) {
-        this.visibilityChange.emit({ columnKey, visible: checked });
-    }
-    onSelectAll() {
-        for (const col of this.columns()) {
-            if (!this.visibleColumns().has(col.columnId)) {
-                this.visibilityChange.emit({ columnKey: col.columnId, visible: true });
-            }
-        }
-    }
-    onClearAll() {
-        for (const col of this.columns()) {
-            if (col.required !== true && this.visibleColumns().has(col.columnId)) {
-                this.visibilityChange.emit({ columnKey: col.columnId, visible: false });
-            }
-        }
+import { BaseColumnChooserComponent } from '@alaarab/ogrid-angular';
+let ColumnChooserComponent = class ColumnChooserComponent extends BaseColumnChooserComponent {
+    // PrimeNG uses 'open' instead of 'isOpen'
+    get open() {
+        return this.isOpen;
     }
 };
 ColumnChooserComponent = __decorate([
@@ -57,14 +37,14 @@ ColumnChooserComponent = __decorate([
         <div
           style="position:absolute;right:0;top:100%;z-index:100;min-width:220px;max-height:320px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);padding:8px 0"
         >
-          <div style="padding:4px 12px;font-weight:600;font-size:12px;color:var(--ogrid-muted, #666)">
+          <div style="padding:4px 12px;font-weight:600;font-size:12px;color:var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6))">
             Select Columns ({{ visibleCount() }} of {{ totalCount() }})
           </div>
-          @for (col of columns(); track col.columnId) {
+          @for (col of columns; track col.columnId) {
             <label style="display:flex;align-items:center;gap:8px;padding:4px 12px;cursor:pointer;font-size:13px">
               <input
                 type="checkbox"
-                [checked]="visibleColumns().has(col.columnId)"
+                [checked]="visibleColumns.has(col.columnId)"
                 (change)="onToggle(col.columnId, $any($event.target).checked)"
                 [disabled]="col.required === true"
               />

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

@@ -4,81 +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, signal, computed, viewChild, DestroyRef, inject, effect } from '@angular/core';
+import { Component, ViewChild, DestroyRef, inject, effect } from '@angular/core';
 import { CommonModule } from '@angular/common';
-let ColumnHeaderFilterComponent = class ColumnHeaderFilterComponent {
+import { BaseColumnHeaderFilterComponent } from '@alaarab/ogrid-angular';
+let ColumnHeaderFilterComponent = class ColumnHeaderFilterComponent extends BaseColumnHeaderFilterComponent {
+    getHeaderEl() {
+        return this.filterTrigger;
+    }
     constructor() {
+        super();
         this.destroyRef = inject(DestroyRef);
-        this.columnKey = input.required();
-        this.columnName = input.required();
-        this.filterType = input('none');
-        this.isSorted = input(false);
-        this.isSortedDescending = input(false);
-        this.onSort = input(undefined);
-        // Multi-select filter
-        this.selectedValues = input(undefined);
-        this.onFilterChange = input(undefined);
-        this.options = input([]);
-        this.isLoadingOptions = input(false);
-        // Text filter
-        this.textValue = input('');
-        this.onTextChange = input(undefined);
-        // People filter
-        this.selectedUser = input(undefined);
-        this.onUserChange = input(undefined);
-        this.peopleSearch = input(undefined);
-        // Date filter
-        this.dateValue = input(undefined);
-        this.onDateChange = input(undefined);
-        // 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('');
-        this.filterTrigger = viewChild('filterTrigger');
-        this.filterPanel = viewChild('filterPanel');
-        this.peopleDebounceTimer = null;
         this.clickOutsideHandler = (e) => {
-            const trigger = this.filterTrigger()?.nativeElement;
-            const panel = this.filterPanel()?.nativeElement;
+            const trigger = this.filterTrigger?.nativeElement;
+            const panel = this.filterPanel?.nativeElement;
             if (trigger && !trigger.contains(e.target) && (!panel || !panel.contains(e.target))) {
                 this.isFilterOpen.set(false);
             }
         };
-        this.hasActiveFilter = computed(() => {
-            const ft = this.filterType();
-            if (ft === 'text')
-                return !!this.textValue();
-            if (ft === 'multiSelect') {
-                const sv = this.selectedValues();
-                return sv != null && sv.length > 0;
-            }
-            if (ft === 'people')
-                return this.selectedUser() != null;
-            if (ft === 'date') {
-                const dv = this.dateValue();
-                return dv != null && (dv.from != null || dv.to != null);
-            }
-            return false;
-        });
-        this.filteredOptions = computed(() => {
-            const search = this.searchText().toLowerCase();
-            const opts = this.options() ?? [];
-            return search ? opts.filter((o) => o.toLowerCase().includes(search)) : opts;
-        });
         // Sync temp values when filter opens
         effect(() => {
             if (this.isFilterOpen()) {
-                this.tempTextValue.set(this.textValue() ?? '');
+                this.tempTextValue.set(this.textValue ?? '');
                 this.searchText.set('');
-                const sv = this.selectedValues();
+                const sv = this.selectedValues;
                 this.tempSelected.set(new Set(sv ?? []));
-                const dv = this.dateValue();
+                const dv = this.dateValue;
                 this.tempDateFrom.set(dv?.from ?? '');
                 this.tempDateTo.set(dv?.to ?? '');
                 document.addEventListener('mousedown', this.clickOutsideHandler, true);
@@ -89,93 +39,25 @@ let ColumnHeaderFilterComponent = class ColumnHeaderFilterComponent {
         });
         this.destroyRef.onDestroy(() => {
             document.removeEventListener('mousedown', this.clickOutsideHandler, true);
-            if (this.peopleDebounceTimer)
-                clearTimeout(this.peopleDebounceTimer);
         });
     }
     handleSortClick() {
-        this.onSort()?.();
+        this.onSort?.();
     }
     toggleFilter() {
         this.isFilterOpen.update((v) => !v);
     }
-    // Text filter
-    handleTextApply() {
-        const value = this.tempTextValue().trim();
-        this.onTextChange()?.(value);
-        this.isFilterOpen.set(false);
-    }
-    handleTextClear() {
-        this.tempTextValue.set('');
-        this.onTextChange()?.('');
-        this.isFilterOpen.set(false);
-    }
-    // Multi-select filter
-    handleCheckboxChange(opt, checked) {
-        this.tempSelected.update((prev) => {
-            const next = new Set(prev);
-            if (checked)
-                next.add(opt);
-            else
-                next.delete(opt);
-            return next;
-        });
-    }
+    // Adapter methods for template compatibility
     handleSelectAllOptions() {
-        this.tempSelected.set(new Set(this.filteredOptions()));
-    }
-    handleClearSelection() {
-        this.tempSelected.set(new Set());
-    }
-    handleApplyMultiSelect() {
-        this.onFilterChange()?.(Array.from(this.tempSelected()));
-        this.isFilterOpen.set(false);
-    }
-    // People filter
-    onPeopleSearchInput(value) {
-        this.peopleSearchText.set(value);
-        if (this.peopleDebounceTimer)
-            clearTimeout(this.peopleDebounceTimer);
-        const searcher = this.peopleSearch();
-        if (!searcher || !value.trim()) {
-            this.peopleSuggestions.set([]);
-            return;
-        }
-        this.isPeopleLoading.set(true);
-        this.peopleDebounceTimer = setTimeout(() => {
-            searcher(value.trim())
-                .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() || undefined;
-        const to = this.tempDateTo() || undefined;
-        this.onDateChange()?.(from || to ? { from, to } : undefined);
-        this.isFilterOpen.set(false);
-    }
-    handleDateClear() {
-        this.tempDateFrom.set('');
-        this.tempDateTo.set('');
-        this.onDateChange()?.(undefined);
-        this.isFilterOpen.set(false);
+        this.handleSelectAllFiltered();
     }
 };
+__decorate([
+    ViewChild('filterTrigger')
+], ColumnHeaderFilterComponent.prototype, "filterTrigger", void 0);
+__decorate([
+    ViewChild('filterPanel')
+], ColumnHeaderFilterComponent.prototype, "filterPanel", void 0);
 ColumnHeaderFilterComponent = __decorate([
     Component({
         selector: 'ogrid-primeng-column-header-filter',
@@ -184,31 +66,31 @@ ColumnHeaderFilterComponent = __decorate([
         template: `
     <div style="display:flex;align-items:center;flex:1;min-width:0;gap:4px">
       <div style="flex:1;min-width:0;overflow:hidden">
-        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block" [title]="columnName()" data-header-label>
-          {{ columnName() }}
+        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block" [title]="columnName" data-header-label>
+          {{ columnName }}
         </span>
       </div>
       <div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
-        @if (onSort()) {
+        @if (onSort) {
           <button
             type="button"
             (click)="handleSortClick()"
-            [attr.aria-label]="'Sort by ' + columnName()"
-            [title]="isSorted() ? (isSortedDescending() ? 'Sorted descending' : 'Sorted ascending') : 'Sort'"
+            [attr.aria-label]="'Sort by ' + columnName"
+            [title]="isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort'"
             style="border:none;background:transparent;cursor:pointer;padding:2px 4px;font-size:12px;color:var(--ogrid-fg, #242424)"
-            [style.font-weight]="isSorted() ? 'bold' : 'normal'"
+            [style.font-weight]="isSorted ? 'bold' : 'normal'"
           >
-            {{ isSorted() ? (isSortedDescending() ? '\u2193' : '\u2191') : '\u21C5' }}
+            {{ isSorted ? (isSortedDescending ? '\u2193' : '\u2191') : '\u21C5' }}
           </button>
         }
 
-        @if (filterType() !== 'none') {
+        @if (filterType !== 'none') {
           <button
             type="button"
             #filterTrigger
             (click)="toggleFilter()"
-            [attr.aria-label]="'Filter ' + columnName()"
-            [title]="'Filter ' + columnName()"
+            [attr.aria-label]="'Filter ' + columnName"
+            [title]="'Filter ' + columnName"
             style="border:none;background:transparent;cursor:pointer;padding:2px 4px;font-size:12px;position:relative;color:var(--ogrid-fg, #242424)"
             [style.font-weight]="hasActiveFilter() ? 'bold' : 'normal'"
           >
@@ -224,10 +106,10 @@ ColumnHeaderFilterComponent = __decorate([
               style="position:absolute;top:100%;left:0;z-index:200;min-width:200px;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.12);font-weight:normal"
             >
               <div style="padding:8px 12px;font-weight:600;font-size:12px;border-bottom:1px solid var(--ogrid-border, #e0e0e0)">
-                Filter: {{ columnName() }}
+                Filter: {{ columnName }}
               </div>
 
-              @if (filterType() === 'text') {
+              @if (filterType === 'text') {
                 <div style="padding:8px 12px">
                   <input
                     type="text"
@@ -235,7 +117,7 @@ ColumnHeaderFilterComponent = __decorate([
                     (input)="tempTextValue.set($any($event.target).value)"
                     placeholder="Filter text..."
                     style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
-                    [attr.aria-label]="'Filter ' + columnName()"
+                    [attr.aria-label]="'Filter ' + columnName"
                   />
                 </div>
                 <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, #e0e0e0)">
@@ -243,7 +125,7 @@ ColumnHeaderFilterComponent = __decorate([
                     type="button"
                     class="p-button p-button-text p-button-sm"
                     (click)="handleTextClear()"
-                    [disabled]="!textValue()"
+                    [disabled]="!textValue"
                     style="font-size:12px"
                   >Clear</button>
                   <button
@@ -255,7 +137,7 @@ ColumnHeaderFilterComponent = __decorate([
                 </div>
               }
 
-              @if (filterType() === 'multiSelect') {
+              @if (filterType === 'multiSelect') {
                 <div style="padding:8px 12px">
                   <input
                     type="text"
@@ -263,22 +145,22 @@ ColumnHeaderFilterComponent = __decorate([
                     (input)="searchText.set($any($event.target).value)"
                     placeholder="Search options..."
                     style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;font-size:13px;margin-bottom:6px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
-                    [attr.aria-label]="'Search ' + columnName() + ' options'"
+                    [attr.aria-label]="'Search ' + columnName + ' options'"
                   />
-                  @if (isLoadingOptions()) {
-                    <div style="padding:8px 0;color:var(--ogrid-muted, #999);font-size:12px">Loading...</div>
+                  @if (isLoadingOptions) {
+                    <div style="padding:8px 0;color:var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));font-size:12px">Loading...</div>
                   } @else {
                     <div style="display:flex;gap:4px;margin-bottom:6px">
                       <button type="button" class="p-button p-button-text p-button-sm" (click)="handleSelectAllOptions()" style="font-size:11px">All</button>
                       <button type="button" class="p-button p-button-text p-button-sm" (click)="handleClearSelection()" style="font-size:11px">None</button>
                     </div>
-                    <div style="max-height:160px;overflow-y:auto" role="group" [attr.aria-label]="columnName() + ' filter options'">
+                    <div style="max-height:160px;overflow-y:auto" role="group" [attr.aria-label]="columnName + ' filter options'">
                       @for (opt of filteredOptions(); track opt) {
                         <label style="display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer;font-size:13px">
                           <input
                             type="checkbox"
                             [checked]="tempSelected().has(opt)"
-                            (change)="handleCheckboxChange(opt, $any($event.target).checked)"
+                            (change)="handleCheckboxChange(opt, $event)"
                           />
                           {{ opt }}
                         </label>
@@ -296,11 +178,11 @@ ColumnHeaderFilterComponent = __decorate([
                 </div>
               }
 
-              @if (filterType() === 'people') {
+              @if (filterType === 'people') {
                 <div style="padding:8px 12px">
-                  @if (selectedUser()) {
+                  @if (selectedUser) {
                     <div style="display:flex;align-items:center;justify-content:space-between;padding:4px 0;margin-bottom:4px">
-                      <span style="font-size:13px">{{ selectedUser()!.displayName ?? selectedUser()!.email }}</span>
+                      <span style="font-size:13px">{{ selectedUser!.displayName ?? selectedUser!.email }}</span>
                       <button type="button" class="p-button p-button-text p-button-sm" (click)="handleClearUser()" style="font-size:11px">Clear</button>
                     </div>
                   }
@@ -310,10 +192,10 @@ ColumnHeaderFilterComponent = __decorate([
                     (input)="onPeopleSearchInput($any($event.target).value)"
                     placeholder="Search people..."
                     style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
-                    [attr.aria-label]="'Search people for ' + columnName()"
+                    [attr.aria-label]="'Search people for ' + columnName"
                   />
                   @if (isPeopleLoading()) {
-                    <div style="padding:8px 0;color:var(--ogrid-muted, #999);font-size:12px">Loading...</div>
+                    <div style="padding:8px 0;color:var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));font-size:12px">Loading...</div>
                   }
                   @for (user of peopleSuggestions(); track user.email) {
                     <button
@@ -327,7 +209,7 @@ ColumnHeaderFilterComponent = __decorate([
                 </div>
               }
 
-              @if (filterType() === 'date') {
+              @if (filterType === 'date') {
                 <div style="padding:8px 12px;display:flex;flex-direction:column;gap:6px">
                   <label style="display:flex;align-items:center;gap:6px;font-size:12px">
                     From:

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

@@ -4,58 +4,91 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, input, computed, viewChild, ChangeDetectionStrategy } from '@angular/core';
+import { Component, computed, ViewChild, ChangeDetectionStrategy, Input } from '@angular/core';
 import { ButtonModule } from 'primeng/button';
 import { MenuModule } from 'primeng/menu';
-import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-core';
+import { getColumnHeaderMenuItems } from '@alaarab/ogrid-core';
 /**
- * Column header dropdown menu for pin/unpin actions.
+ * Column header dropdown menu for pin/unpin, sort, and autosize actions.
  * Uses PrimeNG Menu component.
  */
 let ColumnHeaderMenuComponent = class ColumnHeaderMenuComponent {
     constructor() {
-        this.columnId = input.required();
-        this.canPinLeft = input(true);
-        this.canPinRight = input(true);
-        this.canUnpin = input(false);
-        this.onPinLeft = input(undefined);
-        this.onPinRight = input(undefined);
-        this.onUnpin = input(undefined);
-        this.menuRef = viewChild('menu');
-        this.menuModel = computed(() => [
-            {
-                label: COLUMN_HEADER_MENU_ITEMS[0].label,
-                disabled: !this.canPinLeft(),
-                command: () => this.handlePinLeft(),
-            },
-            {
-                label: COLUMN_HEADER_MENU_ITEMS[1].label,
-                disabled: !this.canPinRight(),
-                command: () => this.handlePinRight(),
-            },
-            {
-                label: COLUMN_HEADER_MENU_ITEMS[2].label,
-                disabled: !this.canUnpin(),
-                command: () => this.handleUnpin(),
-            },
-        ]);
-    }
-    handlePinLeft() {
-        if (this.canPinLeft()) {
-            this.onPinLeft()?.();
-        }
-    }
-    handlePinRight() {
-        if (this.canPinRight()) {
-            this.onPinRight()?.();
-        }
-    }
-    handleUnpin() {
-        if (this.canUnpin()) {
-            this.onUnpin()?.();
-        }
+        this.canPinLeft = true;
+        this.canPinRight = true;
+        this.canUnpin = false;
+        this.currentSort = null;
+        this.isSortable = true;
+        this.isResizable = true;
+        this.handlers = {};
+        this.menuModel = computed(() => {
+            const items = getColumnHeaderMenuItems({
+                canPinLeft: this.canPinLeft,
+                canPinRight: this.canPinRight,
+                canUnpin: this.canUnpin,
+                currentSort: this.currentSort,
+                isSortable: this.isSortable,
+                isResizable: this.isResizable,
+            });
+            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 result = [];
+            for (const item of items) {
+                result.push({
+                    label: item.label,
+                    disabled: item.disabled,
+                    command: () => {
+                        const action = actionMap[item.id];
+                        if (action) {
+                            action();
+                            h.onClose?.();
+                        }
+                    },
+                });
+                if (item.divider) {
+                    result.push({ separator: true });
+                }
+            }
+            return result;
+        });
     }
 };
+__decorate([
+    Input({ required: true })
+], ColumnHeaderMenuComponent.prototype, "columnId", void 0);
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "canPinLeft", void 0);
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "canPinRight", void 0);
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "canUnpin", void 0);
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "currentSort", void 0);
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "isSortable", void 0);
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "isResizable", void 0);
+__decorate([
+    Input()
+], ColumnHeaderMenuComponent.prototype, "handlers", void 0);
+__decorate([
+    ViewChild('menu')
+], ColumnHeaderMenuComponent.prototype, "menuRef", void 0);
 ColumnHeaderMenuComponent = __decorate([
     Component({
         selector: 'column-header-menu',
@@ -69,7 +102,7 @@ ColumnHeaderMenuComponent = __decorate([
       icon="pi pi-ellipsis-v"
       class="p-button-text p-button-sm column-header-menu-trigger"
       (click)="menu.toggle($event)"
-      [attr.aria-label]="'Column options for ' + columnId()"
+      [attr.aria-label]="'Column options for ' + columnId"
     ></button>
 
     <p-menu
@@ -81,15 +114,19 @@ ColumnHeaderMenuComponent = __decorate([
   `,
         styles: [`
     .column-header-menu-trigger {
-      opacity: 0;
-      transition: opacity 0.15s;
       padding: 0.25rem;
-      min-width: auto;
+      min-width: 24px;
+      height: 24px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
+      border-radius: 4px;
+      transition: background-color 0.15s;
     }
-
-    :host:hover .column-header-menu-trigger,
-    .column-header-menu-trigger:focus {
-      opacity: 1;
+    .column-header-menu-trigger:hover {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
   `],
     })