@alaarab/ogrid-angular-material 2.0.8 → 2.0.11

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>

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 {
@@ -406,17 +234,43 @@ ColumnHeaderFilterComponent = __decorate([
       display: inline-flex; align-items: center; justify-content: center; position: relative;
       color: rgba(0,0,0,0.54);
     }
-    .ogrid-header-filter__btn:hover { background: rgba(0,0,0,0.04); }
+    .ogrid-header-filter__btn:hover { background: 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: 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 rgba(0,0,0,0.65);
+      position: relative;
+    }
+    .ogrid-header-filter__funnel::after {
+      content: ''; display: block; width: 2px; height: 4px;
+      background: 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);
+      position: fixed; z-index: 10000;
+      background: #ffffff; border: 1px solid 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;
     }
     .ogrid-header-filter__popover-header {
@@ -476,7 +330,7 @@ ColumnHeaderFilterComponent = __decorate([
     .ogrid-header-filter__people-option:hover { background: rgba(0,0,0,0.04); }
   `],
         host: {
-            '(document:click)': 'onDocumentClick($event)',
+            '(document:click)': 'onDocumentClickWrapper($event)',
         },
     })
 ], ColumnHeaderFilterComponent);

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

@@ -4,96 +4,129 @@ 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, viewChild, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild, computed, Input } from '@angular/core';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-core';
+import { MatDividerModule } from '@angular/material/divider';
+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 Angular Material MatMenu.
  */
 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.menuTrigger = viewChild(MatMenuTrigger);
-        this.menuItems = COLUMN_HEADER_MENU_ITEMS;
+        this.canPinLeft = true;
+        this.canPinRight = true;
+        this.canUnpin = false;
+        this.currentSort = null;
+        this.isSortable = true;
+        this.isResizable = 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,
+        }));
     }
-    handlePinLeft() {
-        if (this.canPinLeft()) {
-            this.onPinLeft()?.();
-        }
-    }
-    handlePinRight() {
-        if (this.canPinRight()) {
-            this.onPinRight()?.();
-        }
-    }
-    handleUnpin() {
-        if (this.canUnpin()) {
-            this.onUnpin()?.();
+    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", 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(MatMenuTrigger)
+], ColumnHeaderMenuComponent.prototype, "menuTrigger", void 0);
 ColumnHeaderMenuComponent = __decorate([
     Component({
         selector: 'column-header-menu',
         standalone: true,
-        imports: [MatMenuModule, MatButtonModule, MatIconModule],
         changeDetection: ChangeDetectionStrategy.OnPush,
+        imports: [MatMenuModule, MatDividerModule],
         template: `
     <button
-      mat-icon-button
       [matMenuTriggerFor]="menu"
       class="column-header-menu-trigger"
-      [attr.aria-label]="'Column options for ' + columnId()"
+      [attr.aria-label]="'Column options for ' + columnId"
     >
-      <mat-icon>more_vert</mat-icon>
+      &#8942;
     </button>
 
     <mat-menu #menu="matMenu">
-      <button
-        mat-menu-item
-        [disabled]="!canPinLeft()"
-        (click)="handlePinLeft()"
-      >
-        {{ menuItems[0].label }}
-      </button>
-      <button
-        mat-menu-item
-        [disabled]="!canPinRight()"
-        (click)="handlePinRight()"
-      >
-        {{ menuItems[1].label }}
-      </button>
-      <button
-        mat-menu-item
-        [disabled]="!canUnpin()"
-        (click)="handleUnpin()"
-      >
-        {{ menuItems[2].label }}
-      </button>
+      @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 {
-      opacity: 0;
-      transition: opacity 0.15s;
       width: 24px;
       height: 24px;
-      line-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: rgba(0,0,0,0.54);
     }
 
-    :host:hover .column-header-menu-trigger,
-    .column-header-menu-trigger:focus {
-      opacity: 1;
+    .column-header-menu-trigger:hover {
+      background: rgba(0,0,0,0.08);
+      color: rgba(0,0,0,0.87);
     }
   `],
     })