@alaarab/ogrid-angular-primeng 2.5.9 → 2.6.1

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

@@ -0,0 +1,131 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BaseColumnChooserComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.columnId;
+function ColumnChooserComponent_Conditional_8_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "label", 5)(1, "input", 8);
+    i0.ɵɵdomListener("change", function ColumnChooserComponent_Conditional_8_For_4_Template_input_change_1_listener($event) { const col_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onToggle(col_r3.columnId, $event.target.checked)); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const col_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("checked", ctx_r3.visibleColumns.has(col_r3.columnId))("disabled", col_r3.required === true);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", col_r3.name, " ");
+} }
+function ColumnChooserComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 3)(1, "div", 4);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵrepeaterCreate(3, ColumnChooserComponent_Conditional_8_For_4_Template, 3, 3, "label", 5, _forTrack0);
+    i0.ɵɵdomElementStart(5, "div", 6)(6, "button", 7);
+    i0.ɵɵdomListener("click", function ColumnChooserComponent_Conditional_8_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onClearAll()); });
+    i0.ɵɵtext(7, "Clear All");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(8, "button", 7);
+    i0.ɵɵdomListener("click", function ColumnChooserComponent_Conditional_8_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onSelectAll()); });
+    i0.ɵɵtext(9, "Select All");
+    i0.ɵɵdomElementEnd()()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" Select Columns (", ctx_r3.visibleCount(), " of ", ctx_r3.totalCount(), ") ");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r3.columns);
+} }
+export class ColumnChooserComponent extends BaseColumnChooserComponent {
+    // PrimeNG uses 'open' instead of 'isOpen'
+    get open() {
+        return this.isOpen;
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵColumnChooserComponent_BaseFactory; return function ColumnChooserComponent_Factory(__ngFactoryType__) { return (ɵColumnChooserComponent_BaseFactory || (ɵColumnChooserComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ColumnChooserComponent)))(__ngFactoryType__ || ColumnChooserComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ColumnChooserComponent, selectors: [["ogrid-primeng-column-chooser"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 5, consts: [[2, "position", "relative", "display", "inline-block"], ["type", "button", "aria-haspopup", "listbox", 1, "p-button", "p-button-text", "p-button-sm", 2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "13px", 3, "click"], ["aria-hidden", ""], [2, "position", "absolute", "right", "0", "top", "100%", "z-index", "1000", "min-width", "220px", "max-height", "320px", "overflow-y", "auto", "background", "var(--ogrid-bg, #fff)", "border", "1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))", "border-radius", "6px", "box-shadow", "0 2px 8px rgba(0,0,0,0.12)", "padding", "8px 0"], [2, "padding", "4px 12px", "font-weight", "600", "font-size", "12px", "color", "var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6))"], [2, "display", "flex", "align-items", "center", "gap", "8px", "padding", "4px 12px", "cursor", "pointer", "font-size", "13px"], [2, "display", "flex", "gap", "4px", "padding", "8px 12px", "border-top", "1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))", "margin-top", "4px"], ["type", "button", 1, "p-button", "p-button-text", "p-button-sm", 2, "flex", "1", "font-size", "12px", 3, "click"], ["type", "checkbox", 3, "change", "checked", "disabled"]], template: function ColumnChooserComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "button", 1);
+            i0.ɵɵdomListener("click", function ColumnChooserComponent_Template_button_click_1_listener() { return ctx.open.set(!ctx.open()); });
+            i0.ɵɵdomElementStart(2, "span", 2);
+            i0.ɵɵtext(3, "\u2699");
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(4, "span");
+            i0.ɵɵtext(5);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(6, "span", 2);
+            i0.ɵɵtext(7);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵconditionalCreate(8, ColumnChooserComponent_Conditional_8_Template, 10, 2, "div", 3);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵattribute("aria-expanded", ctx.open());
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate2("Column Visibility (", ctx.visibleCount(), " of ", ctx.totalCount(), ")");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.open() ? "\u25B2" : "\u25BC");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.open() ? 8 : -1);
+        } }, encapsulation: 2, changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ColumnChooserComponent, [{
+        type: Component,
+        args: [{
+                selector: 'ogrid-primeng-column-chooser',
+                standalone: true,
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div style="position:relative;display:inline-block">
+      <button
+        type="button"
+        class="p-button p-button-text p-button-sm"
+        (click)="open.set(!open())"
+        [attr.aria-expanded]="open()"
+        aria-haspopup="listbox"
+        style="display:flex;align-items:center;gap:6px;font-size:13px"
+      >
+        <span aria-hidden>&#9881;</span>
+        <span>Column Visibility ({{ visibleCount() }} of {{ totalCount() }})</span>
+        <span aria-hidden>{{ open() ? '\u25B2' : '\u25BC' }}</span>
+      </button>
+
+      @if (open()) {
+        <div
+          style="position:absolute;right:0;top:100%;z-index:1000;min-width:220px;max-height:320px;overflow-y:auto;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));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-fg-secondary, rgba(0, 0, 0, 0.6))">
+            Select Columns ({{ visibleCount() }} of {{ totalCount() }})
+          </div>
+          @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)"
+                (change)="onToggle(col.columnId, $any($event.target).checked)"
+                [disabled]="col.required === true"
+              />
+              {{ col.name }}
+            </label>
+          }
+          <div style="display:flex;gap:4px;padding:8px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));margin-top:4px">
+            <button
+              type="button"
+              class="p-button p-button-text p-button-sm"
+              (click)="onClearAll()"
+              style="flex:1;font-size:12px"
+            >Clear All</button>
+            <button
+              type="button"
+              class="p-button p-button-text p-button-sm"
+              (click)="onSelectAll()"
+              style="flex:1;font-size:12px"
+            >Select All</button>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+            }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ColumnChooserComponent, { className: "ColumnChooserComponent", filePath: "column-chooser/column-chooser.component.ts", lineNumber: 60 }); })();

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

@@ -0,0 +1,465 @@
+import { Component, ViewChild, DestroyRef, inject, effect, ChangeDetectionStrategy } from '@angular/core';
+import { BaseColumnHeaderFilterComponent } from '@alaarab/ogrid-angular';
+import * as i0 from "@angular/core";
+const _c0 = ["filterTrigger"];
+const _c1 = ["filterPanel"];
+const _forTrack0 = ($index, $item) => $item.email;
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElement(0, "span", 7);
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 10)(1, "input", 11);
+    i0.ɵɵdomListener("input", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_4_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.tempTextValue.set($event.target.value)); });
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(2, "div", 12)(3, "button", 13);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_4_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleTextClear()); });
+    i0.ɵɵtext(4, "Clear");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(5, "button", 14);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_4_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleTextApply()); });
+    i0.ɵɵtext(6, "Apply");
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("value", ctx_r1.tempTextValue());
+    i0.ɵɵattribute("aria-label", "Filter " + ctx_r1.columnName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("disabled", !ctx_r1.textValue);
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 16);
+    i0.ɵɵtext(1, "Loading...");
+    i0.ɵɵdomElementEnd();
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Conditional_3_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "label", 20)(1, "input", 21);
+    i0.ɵɵdomListener("change", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Conditional_3_For_7_Template_input_change_1_listener($event) { const opt_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.handleCheckboxChange(opt_r7, $event)); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const opt_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("checked", ctx_r1.tempSelected().has(opt_r7));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", opt_r7, " ");
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 17)(1, "button", 18);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Conditional_3_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleSelectAllOptions()); });
+    i0.ɵɵtext(2, "All");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "button", 18);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleClearSelection()); });
+    i0.ɵɵtext(4, "None");
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(5, "div", 19);
+    i0.ɵɵrepeaterCreate(6, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Conditional_3_For_7_Template, 3, 2, "label", 20, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(5);
+    i0.ɵɵattribute("aria-label", ctx_r1.columnName + " filter options");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.filteredOptions());
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 10)(1, "input", 15);
+    i0.ɵɵdomListener("input", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.searchText.set($event.target.value)); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(2, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Conditional_2_Template, 2, 0, "div", 16)(3, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Conditional_3_Template, 8, 1);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "div", 12)(5, "button", 14);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleApplyMultiSelect()); });
+    i0.ɵɵtext(6, "Apply");
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("value", ctx_r1.searchText());
+    i0.ɵɵattribute("aria-label", "Search " + ctx_r1.columnName + " options");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isLoadingOptions ? 2 : 3);
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 22)(1, "span", 25);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(3, "button", 18);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleClearUser()); });
+    i0.ɵɵtext(4, "Clear");
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.selectedUser.displayName ?? ctx_r1.selectedUser.email);
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 16);
+    i0.ɵɵtext(1, "Loading...");
+    i0.ɵɵdomElementEnd();
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 26);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_For_5_Template_button_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.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const user_r11 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", user_r11.displayName ?? user_r11.email, " ");
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 10);
+    i0.ɵɵconditionalCreate(1, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_Conditional_1_Template, 5, 1, "div", 22);
+    i0.ɵɵdomElementStart(2, "input", 23);
+    i0.ɵɵdomListener("input", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onPeopleSearchInput($event)); });
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(3, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_Conditional_3_Template, 2, 0, "div", 16);
+    i0.ɵɵrepeaterCreate(4, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_For_5_Template, 2, 1, "button", 24, _forTrack0);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedUser ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵdomProperty("value", ctx_r1.peopleSearchText());
+    i0.ɵɵattribute("aria-label", "Search people for " + ctx_r1.columnName);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isPeopleLoading() ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.peopleSuggestions());
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "div", 27)(1, "label", 28);
+    i0.ɵɵtext(2, " From: ");
+    i0.ɵɵdomElementStart(3, "input", 29);
+    i0.ɵɵdomListener("change", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_7_Template_input_change_3_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.tempDateFrom.set($event.target.value)); });
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(4, "label", 28);
+    i0.ɵɵtext(5, " To: ");
+    i0.ɵɵdomElementStart(6, "input", 29);
+    i0.ɵɵdomListener("change", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_7_Template_input_change_6_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.tempDateTo.set($event.target.value)); });
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵdomElementStart(7, "div", 12)(8, "button", 13);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_7_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleDateClear()); });
+    i0.ɵɵtext(9, "Clear");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(10, "button", 14);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_7_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleDateApply()); });
+    i0.ɵɵtext(11, "Apply");
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵdomProperty("value", ctx_r1.tempDateFrom());
+    i0.ɵɵadvance(3);
+    i0.ɵɵdomProperty("value", ctx_r1.tempDateTo());
+    i0.ɵɵadvance(2);
+    i0.ɵɵdomProperty("disabled", !ctx_r1.tempDateFrom() && !ctx_r1.tempDateTo());
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 8, 1)(2, "div", 9);
+    i0.ɵɵtext(3);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(4, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_4_Template, 7, 3);
+    i0.ɵɵconditionalCreate(5, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_5_Template, 7, 3);
+    i0.ɵɵconditionalCreate(6, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_6_Template, 6, 4, "div", 10);
+    i0.ɵɵconditionalCreate(7, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Conditional_7_Template, 12, 3);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" Filter: ", ctx_r1.columnName, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filterType === "text" ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filterType === "multiSelect" ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filterType === "people" ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filterType === "date" ? 7 : -1);
+} }
+function ColumnHeaderFilterComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 6, 0);
+    i0.ɵɵdomListener("click", function ColumnHeaderFilterComponent_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFilter()); });
+    i0.ɵɵtext(2, " \u25BE ");
+    i0.ɵɵconditionalCreate(3, ColumnHeaderFilterComponent_Conditional_5_Conditional_3_Template, 1, 0, "span", 7);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(4, ColumnHeaderFilterComponent_Conditional_5_Conditional_4_Template, 8, 5, "div", 8);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("font-weight", ctx_r1.hasActiveFilter() ? "bold" : "normal");
+    i0.ɵɵdomProperty("title", "Filter " + ctx_r1.columnName);
+    i0.ɵɵattribute("aria-label", "Filter " + ctx_r1.columnName)("aria-expanded", ctx_r1.isFilterOpen());
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.hasActiveFilter() ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isFilterOpen() ? 4 : -1);
+} }
+export class ColumnHeaderFilterComponent extends BaseColumnHeaderFilterComponent {
+    getHeaderEl() {
+        return this.filterTrigger;
+    }
+    constructor() {
+        super();
+        this.destroyRef = inject(DestroyRef);
+        this.clickOutsideHandler = (e) => {
+            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);
+            }
+        };
+        // Sync temp values when filter opens
+        effect(() => {
+            if (this.isFilterOpen()) {
+                this.tempTextValue.set(this.textValue ?? '');
+                this.searchText.set('');
+                const sv = this.selectedValues;
+                this.tempSelected.set(new Set(sv ?? []));
+                const dv = this.dateValue;
+                this.tempDateFrom.set(dv?.from ?? '');
+                this.tempDateTo.set(dv?.to ?? '');
+                document.addEventListener('mousedown', this.clickOutsideHandler, true);
+            }
+            else {
+                document.removeEventListener('mousedown', this.clickOutsideHandler, true);
+            }
+        });
+        this.destroyRef.onDestroy(() => {
+            document.removeEventListener('mousedown', this.clickOutsideHandler, true);
+        });
+    }
+    handleSortClick() {
+        this.onSort?.();
+    }
+    toggleFilter() {
+        this.isFilterOpen.update((v) => !v);
+    }
+    // Adapter methods for template compatibility
+    handleSelectAllOptions() {
+        this.handleSelectAllFiltered();
+    }
+    static { this.ɵfac = function ColumnHeaderFilterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ColumnHeaderFilterComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ColumnHeaderFilterComponent, selectors: [["ogrid-primeng-column-header-filter"]], viewQuery: function ColumnHeaderFilterComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterTrigger = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterPanel = _t.first);
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 3, consts: [["filterTrigger", ""], ["filterPanel", ""], [2, "display", "flex", "align-items", "center", "flex", "1", "min-width", "0", "gap", "4px"], [2, "flex", "1", "min-width", "0", "overflow", "hidden"], ["data-header-label", "", 2, "overflow", "hidden", "text-overflow", "ellipsis", "white-space", "nowrap", "display", "block", 3, "title"], [2, "display", "flex", "align-items", "center", "gap", "2px", "flex-shrink", "0"], ["type", "button", "aria-haspopup", "dialog", 2, "border", "none", "background", "transparent", "cursor", "pointer", "padding", "2px 4px", "font-size", "12px", "position", "relative", "color", "var(--ogrid-fg, #242424)", 3, "click", "title"], [2, "position", "absolute", "top", "0", "right", "0", "width", "6px", "height", "6px", "border-radius", "50%", "background", "var(--ogrid-selection, #217346)"], [2, "position", "absolute", "top", "100%", "left", "0", "z-index", "1000", "min-width", "200px", "background", "var(--ogrid-bg, #fff)", "border", "1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))", "border-radius", "6px", "box-shadow", "0 2px 8px rgba(0,0,0,0.12)", "font-weight", "normal"], [2, "padding", "8px 12px", "font-weight", "600", "font-size", "12px", "border-bottom", "1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))"], [2, "padding", "8px 12px"], ["type", "text", "placeholder", "Filter text...", 2, "width", "100%", "box-sizing", "border-box", "padding", "6px 8px", "border", "1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))", "border-radius", "4px", "font-size", "13px", "background", "var(--ogrid-bg, #fff)", "color", "var(--ogrid-fg, #242424)", 3, "input", "value"], [2, "display", "flex", "justify-content", "flex-end", "gap", "6px", "padding", "6px 12px", "border-top", "1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))"], ["type", "button", 1, "p-button", "p-button-text", "p-button-sm", 2, "font-size", "12px", 3, "click", "disabled"], ["type", "button", 1, "p-button", "p-button-sm", 2, "font-size", "12px", 3, "click"], ["type", "text", "placeholder", "Search options...", 2, "width", "100%", "box-sizing", "border-box", "padding", "6px 8px", "border", "1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))", "border-radius", "4px", "font-size", "13px", "margin-bottom", "6px", "background", "var(--ogrid-bg, #fff)", "color", "var(--ogrid-fg, #242424)", 3, "input", "value"], [2, "padding", "8px 0", "color", "var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5))", "font-size", "12px"], [2, "display", "flex", "gap", "4px", "margin-bottom", "6px"], ["type", "button", 1, "p-button", "p-button-text", "p-button-sm", 2, "font-size", "11px", 3, "click"], ["role", "group", 2, "max-height", "160px", "overflow-y", "auto"], [2, "display", "flex", "align-items", "center", "gap", "6px", "padding", "2px 0", "cursor", "pointer", "font-size", "13px"], ["type", "checkbox", 3, "change", "checked"], [2, "display", "flex", "align-items", "center", "justify-content", "space-between", "padding", "4px 0", "margin-bottom", "4px"], ["type", "text", "placeholder", "Search people...", 2, "width", "100%", "box-sizing", "border-box", "padding", "6px 8px", "border", "1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))", "border-radius", "4px", "font-size", "13px", "background", "var(--ogrid-bg, #fff)", "color", "var(--ogrid-fg, #242424)", 3, "input", "value"], ["type", "button", 2, "display", "block", "width", "100%", "text-align", "left", "padding", "6px 0", "border", "none", "background", "transparent", "cursor", "pointer", "font-size", "13px", "color", "var(--ogrid-fg, #242424)"], [2, "font-size", "13px"], ["type", "button", 2, "display", "block", "width", "100%", "text-align", "left", "padding", "6px 0", "border", "none", "background", "transparent", "cursor", "pointer", "font-size", "13px", "color", "var(--ogrid-fg, #242424)", 3, "click"], [2, "padding", "8px 12px", "display", "flex", "flex-direction", "column", "gap", "6px"], [2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "12px"], ["type", "date", 2, "flex", "1", "padding", "4px 6px", "border", "1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))", "border-radius", "4px", "background", "var(--ogrid-bg, #fff)", "color", "var(--ogrid-fg, #242424)", 3, "change", "value"]], template: function ColumnHeaderFilterComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 2)(1, "div", 3)(2, "span", 4);
+            i0.ɵɵtext(3);
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵdomElementStart(4, "div", 5);
+            i0.ɵɵconditionalCreate(5, ColumnHeaderFilterComponent_Conditional_5_Template, 5, 7);
+            i0.ɵɵdomElementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵdomProperty("title", ctx.columnName);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.columnName, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.filterType !== "none" ? 5 : -1);
+        } }, styles: ["[_nghost-%COMP%] {\n      display: flex;\n      position: relative;\n      flex: 1;\n      min-width: 0;\n    }"], changeDetection: 0 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ColumnHeaderFilterComponent, [{
+        type: Component,
+        args: [{ selector: 'ogrid-primeng-column-header-filter', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, 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>
+      </div>
+      <div style="display:flex;align-items:center;gap:2px;flex-shrink:0">
+        @if (filterType !== 'none') {
+          <button
+            type="button"
+            #filterTrigger
+            (click)="toggleFilter()"
+            [attr.aria-label]="'Filter ' + columnName"
+            [attr.aria-expanded]="isFilterOpen()"
+            aria-haspopup="dialog"
+            [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'"
+          >
+            &#9662;
+            @if (hasActiveFilter()) {
+              <span style="position:absolute;top:0;right:0;width:6px;height:6px;border-radius:50%;background:var(--ogrid-selection, #217346)"></span>
+            }
+          </button>
+
+          @if (isFilterOpen()) {
+            <div
+              #filterPanel
+              style="position:absolute;top:100%;left:0;z-index:1000;min-width:200px;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));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, rgba(0, 0, 0, 0.12))">
+                Filter: {{ columnName }}
+              </div>
+
+              @if (filterType === 'text') {
+                <div style="padding:8px 12px">
+                  <input
+                    type="text"
+                    [value]="tempTextValue()"
+                    (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, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    [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, rgba(0, 0, 0, 0.12))">
+                  <button
+                    type="button"
+                    class="p-button p-button-text p-button-sm"
+                    (click)="handleTextClear()"
+                    [disabled]="!textValue"
+                    style="font-size:12px"
+                  >Clear</button>
+                  <button
+                    type="button"
+                    class="p-button p-button-sm"
+                    (click)="handleTextApply()"
+                    style="font-size:12px"
+                  >Apply</button>
+                </div>
+              }
+
+              @if (filterType === 'multiSelect') {
+                <div style="padding:8px 12px">
+                  <input
+                    type="text"
+                    [value]="searchText()"
+                    (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, rgba(0, 0, 0, 0.12));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'"
+                  />
+                  @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'">
+                      @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, $event)"
+                          />
+                          {{ opt }}
+                        </label>
+                      }
+                    </div>
+                  }
+                </div>
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
+                  <button
+                    type="button"
+                    class="p-button p-button-sm"
+                    (click)="handleApplyMultiSelect()"
+                    style="font-size:12px"
+                  >Apply</button>
+                </div>
+              }
+
+              @if (filterType === 'people') {
+                <div style="padding:8px 12px">
+                  @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>
+                      <button type="button" class="p-button p-button-text p-button-sm" (click)="handleClearUser()" style="font-size:11px">Clear</button>
+                    </div>
+                  }
+                  <input
+                    type="text"
+                    [value]="peopleSearchText()"
+                    (input)="onPeopleSearchInput($event)"
+                    placeholder="Search people..."
+                    style="width:100%;box-sizing:border-box;padding:6px 8px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;font-size:13px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    [attr.aria-label]="'Search people for ' + columnName"
+                  />
+                  @if (isPeopleLoading()) {
+                    <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
+                      type="button"
+                      (click)="handleUserSelect(user)"
+                      style="display:block;width:100%;text-align:left;padding:6px 0;border:none;background:transparent;cursor:pointer;font-size:13px;color:var(--ogrid-fg, #242424)"
+                    >
+                      {{ user.displayName ?? user.email }}
+                    </button>
+                  }
+                </div>
+              }
+
+              @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:
+                    <input
+                      type="date"
+                      [value]="tempDateFrom()"
+                      (change)="tempDateFrom.set($any($event.target).value)"
+                      style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    />
+                  </label>
+                  <label style="display:flex;align-items:center;gap:6px;font-size:12px">
+                    To:
+                    <input
+                      type="date"
+                      [value]="tempDateTo()"
+                      (change)="tempDateTo.set($any($event.target).value)"
+                      style="flex:1;padding:4px 6px;border:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));border-radius:4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424)"
+                    />
+                  </label>
+                </div>
+                <div style="display:flex;justify-content:flex-end;gap:6px;padding:6px 12px;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12))">
+                  <button
+                    type="button"
+                    class="p-button p-button-text p-button-sm"
+                    (click)="handleDateClear()"
+                    [disabled]="!tempDateFrom() && !tempDateTo()"
+                    style="font-size:12px"
+                  >Clear</button>
+                  <button
+                    type="button"
+                    class="p-button p-button-sm"
+                    (click)="handleDateApply()"
+                    style="font-size:12px"
+                  >Apply</button>
+                </div>
+              }
+            </div>
+          }
+        }
+      </div>
+    </div>
+  `, styles: ["\n    :host {\n      display: flex;\n      position: relative;\n      flex: 1;\n      min-width: 0;\n    }\n  "] }]
+    }], () => [], { filterTrigger: [{
+            type: ViewChild,
+            args: ['filterTrigger']
+        }], filterPanel: [{
+            type: ViewChild,
+            args: ['filterPanel']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ColumnHeaderFilterComponent, { className: "ColumnHeaderFilterComponent", filePath: "column-header-filter/column-header-filter.component.ts", lineNumber: 195 }); })();