@alaarab/ogrid-angular-material 2.5.9 → 2.6.1

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

@@ -0,0 +1,487 @@
+import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { BaseColumnHeaderFilterComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
+const _c0 = ["headerEl"];
+const _c1 = () => [];
+const _forTrack0 = ($index, $item) => $item.id || $item.email || $item.displayName;
+function ColumnHeaderFilterComponent_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "span", 9);
+} }
+function ColumnHeaderFilterComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 7);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_6_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFilter($event)); });
+    i0.ɵɵdomElement(1, "span", 8);
+    i0.ɵɵconditionalCreate(2, ColumnHeaderFilterComponent_Conditional_6_Conditional_2_Template, 1, 0, "span", 9);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("ogrid-header-filter__filter-btn--active", ctx_r1.hasActiveFilter() || ctx_r1.isFilterOpen());
+    i0.ɵɵdomProperty("title", "Filter " + ctx_r1.columnName);
+    i0.ɵɵattribute("aria-label", "Filter " + ctx_r1.columnName)("aria-expanded", ctx_r1.isFilterOpen());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.hasActiveFilter() ? 2 : -1);
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 12)(1, "div", 16)(2, "input", 17);
+    i0.ɵɵdomListener("input", function ColumnHeaderFilterComponent_Conditional_7_Case_3_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.tempTextValue.set(ctx_r1.asInputValue($event))); })("keydown", function ColumnHeaderFilterComponent_Conditional_7_Case_3_Template_input_keydown_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTextKeydown($event)); });
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(3, "div", 18)(4, "button", 19);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_3_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleTextClear()); });
+    i0.ɵɵtext(5, "Clear");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(6, "button", 20);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_3_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleTextApply()); });
+    i0.ɵɵtext(7, "Apply");
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("value", ctx_r1.tempTextValue());
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("disabled", !ctx_r1.tempTextValue());
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_4_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 27);
+    i0.ɵɵtext(1, "Loading...");
+    i0.ɵɵdomElementEnd();
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_4_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 28);
+    i0.ɵɵtext(1, "No options found");
+    i0.ɵɵdomElementEnd();
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_4_Conditional_13_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "label", 30)(1, "input", 31);
+    i0.ɵɵdomListener("change", function ColumnHeaderFilterComponent_Conditional_7_Case_4_Conditional_13_For_1_Template_input_change_1_listener($event) { const option_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleCheckboxChange(option_r7, $event)); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const option_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("checked", ctx_r1.tempSelected().has(option_r7));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(option_r7);
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_4_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ColumnHeaderFilterComponent_Conditional_7_Case_4_Conditional_13_For_1_Template, 4, 2, "label", 30, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r1.filteredOptions());
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 13)(1, "div", 21)(2, "input", 22);
+    i0.ɵɵdomListener("input", function ColumnHeaderFilterComponent_Conditional_7_Case_4_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.searchText.set(ctx_r1.asInputValue($event))); })("keydown", function ColumnHeaderFilterComponent_Conditional_7_Case_4_Template_input_keydown_2_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 23);
+    i0.ɵɵtext(4);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(5, "div", 24)(6, "button", 25);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_4_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleSelectAllFiltered()); });
+    i0.ɵɵtext(7);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "button", 25);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_4_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleClearSelection()); });
+    i0.ɵɵtext(9, "Clear");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(10, "div", 26);
+    i0.ɵɵconditionalCreate(11, ColumnHeaderFilterComponent_Conditional_7_Case_4_Conditional_11_Template, 2, 0, "div", 27)(12, ColumnHeaderFilterComponent_Conditional_7_Case_4_Conditional_12_Template, 2, 0, "div", 28)(13, ColumnHeaderFilterComponent_Conditional_7_Case_4_Conditional_13_Template, 2, 0);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(14, "div", 29)(15, "button", 25);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_4_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleClearSelection()); });
+    i0.ɵɵtext(16, "Clear");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(17, "button", 20);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_4_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleApplyMultiSelect()); });
+    i0.ɵɵtext(18, "Apply");
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("value", ctx_r1.searchText());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.filteredOptions().length, " of ", (ctx_r1.options ?? i0.ɵɵpureFunction0(5, _c1)).length, " options ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" Select All (", ctx_r1.filteredOptions().length, ") ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.isLoadingOptions ? 11 : ctx_r1.filteredOptions().length === 0 ? 12 : 13);
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 32)(1, "div", 35);
+    i0.ɵɵtext(2, "Currently filtered by:");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 36)(4, "div", 37);
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(6, "div", 38)(7, "div");
+    i0.ɵɵtext(8);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(9, "div", 39);
+    i0.ɵɵtext(10);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(11, "button", 40);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleClearUser()); });
+    i0.ɵɵtext(12, "\u00D7");
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate((ctx_r1.selectedUser.displayName == null ? null : ctx_r1.selectedUser.displayName[0]) ?? "?");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedUser.displayName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedUser.email);
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 27);
+    i0.ɵɵtext(1, "Loading...");
+    i0.ɵɵdomElementEnd();
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 28);
+    i0.ɵɵtext(1, "No results found");
+    i0.ɵɵdomElementEnd();
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 42);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_7_For_1_Template_div_click_0_listener() { const user_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleUserSelect(user_r11)); });
+    i0.ɵɵdomElementStart(1, "div", 37);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "div", 38)(4, "div");
+    i0.ɵɵtext(5);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(6, "div", 39);
+    i0.ɵɵtext(7);
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const user_r11 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate((user_r11.displayName == null ? null : user_r11.displayName[0]) ?? "?");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(user_r11.displayName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(user_r11.email);
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_7_For_1_Template, 8, 3, "div", 41, _forTrack0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r1.peopleSuggestions());
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 28);
+    i0.ɵɵtext(1, "Type to search...");
+    i0.ɵɵdomElementEnd();
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 34)(1, "button", 43);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_9_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleClearUser()); });
+    i0.ɵɵtext(2, "Clear Filter");
+    i0.ɵɵdomElementEnd()();
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_5_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 14);
+    i0.ɵɵconditionalCreate(1, ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_1_Template, 13, 3, "div", 32);
+    i0.ɵɵdomElementStart(2, "div", 21)(3, "input", 33);
+    i0.ɵɵdomListener("input", function ColumnHeaderFilterComponent_Conditional_7_Case_5_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onPeopleSearchInput($event)); })("keydown", function ColumnHeaderFilterComponent_Conditional_7_Case_5_Template_input_keydown_3_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(4, "div", 26);
+    i0.ɵɵconditionalCreate(5, ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_5_Template, 2, 0, "div", 27)(6, ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_6_Template, 2, 0, "div", 28)(7, ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_7_Template, 2, 0)(8, ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_8_Template, 2, 0, "div", 28);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(9, ColumnHeaderFilterComponent_Conditional_7_Case_5_Conditional_9_Template, 3, 0, "div", 34);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedUser ? 1 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("value", ctx_r1.peopleSearchText());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.isPeopleLoading() && ctx_r1.peopleSearchText().trim() ? 5 : ctx_r1.peopleSuggestions().length === 0 && ctx_r1.peopleSearchText().trim() ? 6 : ctx_r1.peopleSearchText().trim() ? 7 : 8);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.selectedUser ? 9 : -1);
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Case_6_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 15)(1, "div", 44)(2, "span", 45);
+    i0.ɵɵtext(3, "From:");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "input", 46);
+    i0.ɵɵdomListener("input", function ColumnHeaderFilterComponent_Conditional_7_Case_6_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.tempDateFrom.set(ctx_r1.asInputValue($event))); });
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(5, "div", 44)(6, "span", 45);
+    i0.ɵɵtext(7, "To:");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "input", 46);
+    i0.ɵɵdomListener("input", function ColumnHeaderFilterComponent_Conditional_7_Case_6_Template_input_input_8_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.tempDateTo.set(ctx_r1.asInputValue($event))); });
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(9, "div", 47)(10, "button", 19);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_6_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleDateClear()); });
+    i0.ɵɵtext(11, "Clear");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(12, "button", 20);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Case_6_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleDateApply()); });
+    i0.ɵɵtext(13, "Apply");
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵdomProperty("value", ctx_r1.tempDateFrom());
+    i0.ɵɵadvance(4);
+    i0.ɵɵdomProperty("value", ctx_r1.tempDateTo());
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("disabled", !ctx_r1.tempDateFrom() && !ctx_r1.tempDateTo());
+} }
+function ColumnHeaderFilterComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 10);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵdomElementStart(1, "div", 11);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(3, ColumnHeaderFilterComponent_Conditional_7_Case_3_Template, 8, 2, "div", 12)(4, ColumnHeaderFilterComponent_Conditional_7_Case_4_Template, 19, 6, "div", 13)(5, ColumnHeaderFilterComponent_Conditional_7_Case_5_Template, 10, 4, "div", 14)(6, ColumnHeaderFilterComponent_Conditional_7_Case_6_Template, 14, 3, "div", 15);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    let tmp_5_0;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("top", ctx_r1.popoverTop(), "px")("left", ctx_r1.popoverLeft(), "px");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Filter: ", ctx_r1.columnName, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_5_0 = ctx_r1.filterType) === "text" ? 3 : tmp_5_0 === "multiSelect" ? 4 : tmp_5_0 === "people" ? 5 : tmp_5_0 === "date" ? 6 : -1);
+} }
+/**
+ * Column header filter component with sort + filter icon + popover.
+ * Standalone component with inline template.
+ */
+export class ColumnHeaderFilterComponent extends BaseColumnHeaderFilterComponent {
+    getHeaderEl() {
+        return this.headerEl;
+    }
+    onDocumentClickWrapper(event) {
+        this.onDocumentClick(event, 'ogrid-column-header-filter');
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵColumnHeaderFilterComponent_BaseFactory; return function ColumnHeaderFilterComponent_Factory(__ngFactoryType__) { return (ɵColumnHeaderFilterComponent_BaseFactory || (ɵColumnHeaderFilterComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ColumnHeaderFilterComponent)))(__ngFactoryType__ || ColumnHeaderFilterComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ColumnHeaderFilterComponent, selectors: [["ogrid-column-header-filter"]], viewQuery: function ColumnHeaderFilterComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerEl = _t.first);
+        } }, hostBindings: function ColumnHeaderFilterComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function ColumnHeaderFilterComponent_click_HostBindingHandler($event) { return ctx.onDocumentClickWrapper($event); }, i0.ɵɵresolveDocument);
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 4, consts: [["headerEl", ""], [1, "ogrid-header-filter"], [1, "ogrid-header-filter__label"], ["data-header-label", "", 1, "ogrid-header-filter__name", 3, "title"], [1, "ogrid-header-filter__actions"], ["aria-haspopup", "dialog", 1, "ogrid-header-filter__filter-btn", 3, "ogrid-header-filter__filter-btn--active", "title"], [1, "ogrid-header-filter__popover", 3, "top", "left"], ["aria-haspopup", "dialog", 1, "ogrid-header-filter__filter-btn", 3, "click", "title"], [1, "ogrid-header-filter__funnel"], [1, "ogrid-header-filter__dot"], [1, "ogrid-header-filter__popover", 3, "click"], [1, "ogrid-header-filter__popover-header"], [1, "ogrid-header-filter__popover-body", 2, "width", "260px"], [1, "ogrid-header-filter__popover-body", 2, "width", "280px"], [1, "ogrid-header-filter__popover-body", 2, "width", "300px"], [1, "ogrid-header-filter__popover-body", 2, "padding", "12px", "display", "flex", "flex-direction", "column", "gap", "8px"], [2, "padding", "12px"], ["type", "text", "placeholder", "Enter search term...", "autocomplete", "off", 1, "ogrid-header-filter__input", 3, "input", "keydown", "value"], [1, "ogrid-header-filter__popover-actions"], [1, "ogrid-header-filter__action-btn", 3, "click", "disabled"], [1, "ogrid-header-filter__action-btn", "ogrid-header-filter__action-btn--primary", 3, "click"], [2, "padding", "12px 12px 4px"], ["type", "text", "placeholder", "Search...", "autocomplete", "off", 1, "ogrid-header-filter__input", 3, "input", "keydown", "value"], [1, "ogrid-header-filter__options-info"], [1, "ogrid-header-filter__select-actions"], [1, "ogrid-header-filter__action-btn", 3, "click"], [1, "ogrid-header-filter__options-list"], [1, "ogrid-header-filter__loading"], [1, "ogrid-header-filter__empty"], [1, "ogrid-header-filter__popover-actions", 2, "border-top", "1px solid rgba(0,0,0,0.12)"], [1, "ogrid-header-filter__option"], ["type", "checkbox", 3, "change", "checked"], [1, "ogrid-header-filter__people-selected"], ["type", "text", "placeholder", "Search for a person...", "autocomplete", "off", 1, "ogrid-header-filter__input", 3, "input", "keydown", "value"], [2, "padding", "8px 12px", "border-top", "1px solid rgba(0,0,0,0.12)"], [1, "ogrid-header-filter__people-info-label"], [1, "ogrid-header-filter__people-card"], [1, "ogrid-header-filter__people-avatar"], [1, "ogrid-header-filter__people-details"], [1, "ogrid-header-filter__people-email"], ["aria-label", "Remove filter", 1, "ogrid-header-filter__btn", 3, "click"], [1, "ogrid-header-filter__people-option"], [1, "ogrid-header-filter__people-option", 3, "click"], [1, "ogrid-header-filter__action-btn", 2, "width", "100%", 3, "click"], [2, "display", "flex", "align-items", "center", "gap", "8px"], [2, "min-width", "36px", "font-size", "12px"], ["type", "date", 2, "flex", "1", "padding", "4px 6px", 3, "input", "value"], [1, "ogrid-header-filter__popover-actions", 2, "margin-top", "4px"]], template: function ColumnHeaderFilterComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 1, 0)(2, "div", 2)(3, "span", 3);
+            i0.ɵɵtext(4);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(5, "div", 4);
+            i0.ɵɵconditionalCreate(6, ColumnHeaderFilterComponent_Conditional_6_Template, 3, 6, "button", 5);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵconditionalCreate(7, ColumnHeaderFilterComponent_Conditional_7_Template, 7, 6, "div", 6);
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵdomProperty("title", ctx.columnName);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.columnName, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.filterType !== "none" ? 6 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isFilterOpen() && ctx.filterType !== "none" ? 7 : -1);
+        } }, styles: ["[_nghost-%COMP%] { display: flex; align-items: center; flex: 1; min-width: 0; position: relative; }\n    .ogrid-header-filter[_ngcontent-%COMP%] { display: flex; align-items: center; width: 100%; min-width: 0; }\n    .ogrid-header-filter__label[_ngcontent-%COMP%] { flex: 1; min-width: 0; overflow: hidden; }\n    .ogrid-header-filter__name[_ngcontent-%COMP%] {\n      display: block; font-weight: 600; font-size: 14px; line-height: 1.4;\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .ogrid-header-filter__actions[_ngcontent-%COMP%] { display: flex; align-items: center; margin-left: 4px; flex-shrink: 0; }\n    .ogrid-header-filter__btn[_ngcontent-%COMP%] {\n      width: 24px; height: 24px; padding: 2px; border: none; border-radius: 4px;\n      background: transparent; cursor: pointer; font-size: 12px; line-height: 1;\n      display: inline-flex; align-items: center; justify-content: center; position: relative;\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));\n    }\n    .ogrid-header-filter__btn[_ngcontent-%COMP%]:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); }\n    .ogrid-header-filter__btn--active[_ngcontent-%COMP%] { color: var(--mat-sys-primary, #1976d2); }\n    .ogrid-header-filter__filter-btn[_ngcontent-%COMP%] {\n      width: 24px; height: 24px; padding: 2px; border: none; border-radius: 4px;\n      background: transparent; cursor: pointer; line-height: 1;\n      display: inline-flex; align-items: center; justify-content: center; position: relative;\n      opacity: 0.6; transition: opacity 0.15s;\n    }\n    .ogrid-header-filter[_ngcontent-%COMP%]:hover   .ogrid-header-filter__filter-btn[_ngcontent-%COMP%] { opacity: 0.8; }\n    \n\n    .ogrid-header-filter[_ngcontent-%COMP%]   .ogrid-header-filter__filter-btn[_ngcontent-%COMP%]:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); opacity: 1; }\n    .ogrid-header-filter[_ngcontent-%COMP%]   .ogrid-header-filter__filter-btn--active[_ngcontent-%COMP%] { opacity: 1; }\n    .ogrid-header-filter__funnel[_ngcontent-%COMP%] {\n      display: block; width: 0; height: 0;\n      border-left: 5px solid transparent; border-right: 5px solid transparent;\n      border-top: 6px solid var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.65));\n      position: relative;\n    }\n    .ogrid-header-filter__funnel[_ngcontent-%COMP%]::after {\n      content: ''; display: block; width: 2px; height: 4px;\n      background: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.65)); position: absolute;\n      top: -1px; left: -1px;\n    }\n    .ogrid-header-filter__filter-btn--active[_ngcontent-%COMP%]   .ogrid-header-filter__funnel[_ngcontent-%COMP%] {\n      border-top-color: var(--mat-sys-primary, #1976d2);\n    }\n    .ogrid-header-filter__filter-btn--active[_ngcontent-%COMP%]   .ogrid-header-filter__funnel[_ngcontent-%COMP%]::after {\n      background: var(--mat-sys-primary, #1976d2);\n    }\n    .ogrid-header-filter__dot[_ngcontent-%COMP%] {\n      position: absolute; top: 2px; right: 2px;\n      width: 6px; height: 6px; border-radius: 50%;\n      background: var(--mat-sys-primary, #1976d2);\n    }\n    .ogrid-header-filter__popover[_ngcontent-%COMP%] {\n      position: fixed; z-index: 1000;\n      background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.2));\n      border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);\n      margin-top: 4px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__popover-header[_ngcontent-%COMP%] {\n      padding: 8px 12px; font-size: 14px; font-weight: 600;\n      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__popover-body[_ngcontent-%COMP%] { }\n    .ogrid-header-filter__popover-actions[_ngcontent-%COMP%] {\n      display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px;\n    }\n    .ogrid-header-filter__input[_ngcontent-%COMP%] {\n      width: 100%; padding: 8px 12px; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23));\n      border-radius: 4px; font-size: 14px; box-sizing: border-box;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__input[_ngcontent-%COMP%]:focus { outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -1px; }\n    .ogrid-header-filter__options-info[_ngcontent-%COMP%] { margin-top: 4px; font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-header-filter__select-actions[_ngcontent-%COMP%] {\n      display: flex; justify-content: space-between; padding: 4px 12px;\n    }\n    .ogrid-header-filter__options-list[_ngcontent-%COMP%] { max-height: 240px; overflow-y: auto; padding: 0 4px; }\n    .ogrid-header-filter__option[_ngcontent-%COMP%] {\n      display: flex; align-items: center; gap: 8px;\n      padding: 4px 8px; cursor: pointer; font-size: 14px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__option[_ngcontent-%COMP%]:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-header-filter__loading[_ngcontent-%COMP%], .ogrid-header-filter__empty[_ngcontent-%COMP%] {\n      padding: 16px; text-align: center; font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n    }\n    .ogrid-header-filter__action-btn[_ngcontent-%COMP%] {\n      padding: 4px 12px; border: none; border-radius: 4px;\n      background: transparent; cursor: pointer; font-size: 13px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__action-btn[_ngcontent-%COMP%]:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-header-filter__action-btn[_ngcontent-%COMP%]:disabled { opacity: 0.38; cursor: default; }\n    .ogrid-header-filter__action-btn--primary[_ngcontent-%COMP%] {\n      background: var(--mat-sys-primary, #1976d2); color: #fff;\n    }\n    .ogrid-header-filter__action-btn--primary[_ngcontent-%COMP%]:hover { opacity: 0.9; }\n    .ogrid-header-filter__people-selected[_ngcontent-%COMP%] {\n      padding: 12px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n    }\n    .ogrid-header-filter__people-info-label[_ngcontent-%COMP%] { font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-header-filter__people-card[_ngcontent-%COMP%] {\n      display: flex; align-items: center; gap: 8px; margin-top: 4px;\n    }\n    .ogrid-header-filter__people-avatar[_ngcontent-%COMP%] {\n      width: 32px; height: 32px; border-radius: 50%; background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));\n      display: flex; align-items: center; justify-content: center;\n      font-size: 14px; font-weight: 600; flex-shrink: 0;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__people-details[_ngcontent-%COMP%] { flex: 1; min-width: 0; font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }\n    .ogrid-header-filter__people-details[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .ogrid-header-filter__people-email[_ngcontent-%COMP%] { font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-header-filter__people-option[_ngcontent-%COMP%] {\n      display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__people-option[_ngcontent-%COMP%]:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ColumnHeaderFilterComponent, [{
+        type: Component,
+        args: [{ 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"
+            [attr.aria-expanded]="isFilterOpen()"
+            aria-haspopup="dialog"
+            [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>
+    }
+  `, host: {
+                    '(document:click)': 'onDocumentClickWrapper($event)',
+                }, styles: ["\n    :host { display: flex; align-items: center; flex: 1; min-width: 0; position: relative; }\n    .ogrid-header-filter { display: flex; align-items: center; width: 100%; min-width: 0; }\n    .ogrid-header-filter__label { flex: 1; min-width: 0; overflow: hidden; }\n    .ogrid-header-filter__name {\n      display: block; font-weight: 600; font-size: 14px; line-height: 1.4;\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .ogrid-header-filter__actions { display: flex; align-items: center; margin-left: 4px; flex-shrink: 0; }\n    .ogrid-header-filter__btn {\n      width: 24px; height: 24px; padding: 2px; border: none; border-radius: 4px;\n      background: transparent; cursor: pointer; font-size: 12px; line-height: 1;\n      display: inline-flex; align-items: center; justify-content: center; position: relative;\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));\n    }\n    .ogrid-header-filter__btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); }\n    .ogrid-header-filter__btn--active { color: var(--mat-sys-primary, #1976d2); }\n    .ogrid-header-filter__filter-btn {\n      width: 24px; height: 24px; padding: 2px; border: none; border-radius: 4px;\n      background: transparent; cursor: pointer; line-height: 1;\n      display: inline-flex; align-items: center; justify-content: center; position: relative;\n      opacity: 0.6; transition: opacity 0.15s;\n    }\n    .ogrid-header-filter:hover .ogrid-header-filter__filter-btn { opacity: 0.8; }\n    /* :hover and --active must override the parent-hover rule (0,2,0)  -  double-class raises to 0,3,0 */\n    .ogrid-header-filter .ogrid-header-filter__filter-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08)); opacity: 1; }\n    .ogrid-header-filter .ogrid-header-filter__filter-btn--active { opacity: 1; }\n    .ogrid-header-filter__funnel {\n      display: block; width: 0; height: 0;\n      border-left: 5px solid transparent; border-right: 5px solid transparent;\n      border-top: 6px solid var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.65));\n      position: relative;\n    }\n    .ogrid-header-filter__funnel::after {\n      content: ''; display: block; width: 2px; height: 4px;\n      background: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.65)); position: absolute;\n      top: -1px; left: -1px;\n    }\n    .ogrid-header-filter__filter-btn--active .ogrid-header-filter__funnel {\n      border-top-color: var(--mat-sys-primary, #1976d2);\n    }\n    .ogrid-header-filter__filter-btn--active .ogrid-header-filter__funnel::after {\n      background: var(--mat-sys-primary, #1976d2);\n    }\n    .ogrid-header-filter__dot {\n      position: absolute; top: 2px; right: 2px;\n      width: 6px; height: 6px; border-radius: 50%;\n      background: var(--mat-sys-primary, #1976d2);\n    }\n    .ogrid-header-filter__popover {\n      position: fixed; z-index: 1000;\n      background: var(--ogrid-bg, #ffffff); border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.2));\n      border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1);\n      margin-top: 4px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__popover-header {\n      padding: 8px 12px; font-size: 14px; font-weight: 600;\n      border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__popover-body { }\n    .ogrid-header-filter__popover-actions {\n      display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px;\n    }\n    .ogrid-header-filter__input {\n      width: 100%; padding: 8px 12px; border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.23));\n      border-radius: 4px; font-size: 14px; box-sizing: border-box;\n      background: var(--ogrid-bg, #ffffff); color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__input:focus { outline: 2px solid var(--mat-sys-primary, #1976d2); outline-offset: -1px; }\n    .ogrid-header-filter__options-info { margin-top: 4px; font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-header-filter__select-actions {\n      display: flex; justify-content: space-between; padding: 4px 12px;\n    }\n    .ogrid-header-filter__options-list { max-height: 240px; overflow-y: auto; padding: 0 4px; }\n    .ogrid-header-filter__option {\n      display: flex; align-items: center; gap: 8px;\n      padding: 4px 8px; cursor: pointer; font-size: 14px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__option:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-header-filter__loading, .ogrid-header-filter__empty {\n      padding: 16px; text-align: center; font-size: 14px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));\n    }\n    .ogrid-header-filter__action-btn {\n      padding: 4px 12px; border: none; border-radius: 4px;\n      background: transparent; cursor: pointer; font-size: 13px;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__action-btn:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n    .ogrid-header-filter__action-btn:disabled { opacity: 0.38; cursor: default; }\n    .ogrid-header-filter__action-btn--primary {\n      background: var(--mat-sys-primary, #1976d2); color: #fff;\n    }\n    .ogrid-header-filter__action-btn--primary:hover { opacity: 0.9; }\n    .ogrid-header-filter__people-selected {\n      padding: 12px; border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));\n    }\n    .ogrid-header-filter__people-info-label { font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-header-filter__people-card {\n      display: flex; align-items: center; gap: 8px; margin-top: 4px;\n    }\n    .ogrid-header-filter__people-avatar {\n      width: 32px; height: 32px; border-radius: 50%; background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));\n      display: flex; align-items: center; justify-content: center;\n      font-size: 14px; font-weight: 600; flex-shrink: 0;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__people-details { flex: 1; min-width: 0; font-size: 14px; color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)); }\n    .ogrid-header-filter__people-details > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n    .ogrid-header-filter__people-email { font-size: 12px; color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6)); }\n    .ogrid-header-filter__people-option {\n      display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n    .ogrid-header-filter__people-option:hover { background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)); }\n  "] }]
+    }], null, { headerEl: [{
+            type: ViewChild,
+            args: ['headerEl']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ColumnHeaderFilterComponent, { className: "ColumnHeaderFilterComponent", filePath: "column-header-filter/column-header-filter.component.ts", lineNumber: 310 }); })();

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

@@ -0,0 +1,79 @@
+import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import { MatDividerModule } from '@angular/material/divider';
+import { BaseColumnHeaderMenuComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/menu";
+import * as i2 from "@angular/material/divider";
+const _forTrack0 = ($index, $item) => $item.id;
+function ColumnHeaderMenuComponent_For_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mat-divider");
+} }
+function ColumnHeaderMenuComponent_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("click", function ColumnHeaderMenuComponent_For_5_Template_button_click_0_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleMenuItemClick(item_r2.id)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, ColumnHeaderMenuComponent_For_5_Conditional_2_Template, 1, 0, "mat-divider");
+} if (rf & 2) {
+    const item_r2 = ctx.$implicit;
+    i0.ɵɵproperty("disabled", item_r2.disabled);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", item_r2.label, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r2.divider ? 2 : -1);
+} }
+export class ColumnHeaderMenuComponent extends BaseColumnHeaderMenuComponent {
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵColumnHeaderMenuComponent_BaseFactory; return function ColumnHeaderMenuComponent_Factory(__ngFactoryType__) { return (ɵColumnHeaderMenuComponent_BaseFactory || (ɵColumnHeaderMenuComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ColumnHeaderMenuComponent)))(__ngFactoryType__ || ColumnHeaderMenuComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ColumnHeaderMenuComponent, selectors: [["column-header-menu"]], viewQuery: function ColumnHeaderMenuComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(MatMenuTrigger, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuTrigger = _t.first);
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 2, consts: [["menu", "matMenu"], [1, "column-header-menu-trigger", 3, "matMenuTriggerFor"], ["mat-menu-item", "", 3, "click", "disabled"]], template: function ColumnHeaderMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "button", 1);
+            i0.ɵɵtext(1, " \u22EE ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "mat-menu", null, 0);
+            i0.ɵɵrepeaterCreate(4, ColumnHeaderMenuComponent_For_5_Template, 3, 3, null, null, _forTrack0);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            const menu_r4 = i0.ɵɵreference(3);
+            i0.ɵɵproperty("matMenuTriggerFor", menu_r4);
+            i0.ɵɵattribute("aria-label", "Column options for " + ctx.columnId);
+            i0.ɵɵadvance(4);
+            i0.ɵɵrepeater(ctx.menuItems());
+        } }, dependencies: [MatMenuModule, i1.MatMenu, i1.MatMenuItem, i1.MatMenuTrigger, MatDividerModule, i2.MatDivider], styles: ["[_nghost-%COMP%] { flex-shrink: 0; }\n    .column-header-menu-trigger[_ngcontent-%COMP%] {\n      width: 24px;\n      height: 24px;\n      padding: 0;\n      border: none;\n      border-radius: 4px;\n      background: transparent;\n      cursor: pointer;\n      font-size: 16px;\n      line-height: 1;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));\n    }\n\n    \n\n\n    @media (hover: hover) {\n      .column-header-menu-trigger[_ngcontent-%COMP%] { visibility: hidden; }\n    }\n\n    .column-header-menu-trigger[_ngcontent-%COMP%]:hover {\n      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ColumnHeaderMenuComponent, [{
+        type: Component,
+        args: [{ 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: ["\n    :host { flex-shrink: 0; }\n    .column-header-menu-trigger {\n      width: 24px;\n      height: 24px;\n      padding: 0;\n      border: none;\n      border-radius: 4px;\n      background: transparent;\n      cursor: pointer;\n      font-size: 16px;\n      line-height: 1;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.54));\n    }\n\n    /* Always reserve space; hide on hover-capable devices until column is hovered.\n       The th:hover rule lives in the parent (ViewEncapsulation.None) styles. */\n    @media (hover: hover) {\n      .column-header-menu-trigger { visibility: hidden; }\n    }\n\n    .column-header-menu-trigger:hover {\n      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.08));\n      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));\n    }\n  "] }]
+    }], null, { menuTrigger: [{
+            type: ViewChild,
+            args: [MatMenuTrigger]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ColumnHeaderMenuComponent, { className: "ColumnHeaderMenuComponent", filePath: "column-header-menu/column-header-menu.component.ts", lineNumber: 65 }); })();