@gp-grid/angular 0.16.0 → 0.16.1

package/dist/styles.css

@@ -614,7 +614,8 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  overflow: hidden;
+  overflow-y: auto;
+  min-height: 0;
 }
 
 /* Mode toggle (Values / Condition) */

package/fesm2022/gp-grid-angular.mjs

@@ -823,18 +823,31 @@ class FilterPopupComponent {
             this.anchorEl();
             this.currentFilter();
             this.initFromCurrentFilter();
-            requestAnimationFrame(() => this.updatePosition());
+            // Update synchronously so the new column's anchor lands before paint,
+            // not one frame later (which would briefly show the popup at the
+            // previously-open column's position).
+            this.updatePosition();
         });
     }
     ngAfterViewInit() {
+        // Run once the popup element exists; the constructor effect may have run
+        // before the view was ready and bailed.
+        this.updatePosition();
         requestAnimationFrame(() => {
             document.addEventListener('pointerdown', this.onDocumentPointerDown, true);
         });
-        window.addEventListener('resize', this.onWindowResize);
+        // Scroll events don't bubble, so listen in the capture phase on window to
+        // catch scrolls from the grid body, the page, and any wrapping scroll
+        // container in the host app.
+        window.addEventListener('scroll', this.onWindowScrollOrResize, { passive: true, capture: true });
+        window.addEventListener('resize', this.onWindowScrollOrResize);
     }
     ngOnDestroy() {
         document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);
-        window.removeEventListener('resize', this.onWindowResize);
+        window.removeEventListener('scroll', this.onWindowScrollOrResize, { capture: true });
+        window.removeEventListener('resize', this.onWindowScrollOrResize);
+        if (this.repositionRafId !== null)
+            cancelAnimationFrame(this.repositionRafId);
     }
     onEscape() {
         this.close.emit();
@@ -947,8 +960,14 @@ class FilterPopupComponent {
             return;
         this.close.emit();
     };
-    onWindowResize = () => {
-        this.updatePosition();
+    repositionRafId = null;
+    onWindowScrollOrResize = () => {
+        if (this.repositionRafId !== null)
+            return;
+        this.repositionRafId = requestAnimationFrame(() => {
+            this.repositionRafId = null;
+            this.updatePosition();
+        });
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FilterPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FilterPopupComponent, isStandalone: true, selector: "gp-grid-filter-popup", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, anchorEl: { classPropertyName: "anchorEl", publicName: "anchorEl", isSignal: true, isRequired: true, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: true, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", close: "close" }, host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "popupEl", first: true, predicate: ["popupEl"], descendants: true }], ngImport: i0, template: "\n<div\n  #popupEl\n  class=\"gp-grid-filter-popup\"\n  [style.position]=\"'fixed'\"\n  [style.zIndex]=\"10000\"\n  [style.top.px]=\"popupTop()\"\n  [style.left.px]=\"popupLeft()\"\n  [style.minWidth.px]=\"popupMinWidth()\"\n  [style.visibility]=\"positioned() ? 'visible' : 'hidden'\"\n  (keydown.escape)=\"close.emit()\"\n  (click)=\"$event.stopPropagation()\">\n\n  <div class=\"gp-grid-filter-header\">\n    Filter: {{ column().headerName ?? column().field }}\n  </div>\n\n  <div [class]=\"'gp-grid-filter-content ' + (isNumberColumn() ? 'gp-grid-filter-number' : 'gp-grid-filter-text')\">\n  @if (isNumberColumn()) {\n      @for (cond of numberConditions; track $index; let i = $index) {\n        <div class=\"gp-grid-filter-condition\">\n          @if (i > 0) {\n            <div class=\"gp-grid-filter-combination\">\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'and'\"\n                (click)=\"setNumberNextOp(i - 1, 'and')\">\n                AND\n              </button>\n              <button\n                type=\"button\"\n                [class.active]=\"numberConditions[i - 1]?.nextOperator === 'or'\"\n                (click)=\"setNumberNextOp(i - 1, 'or')\">\n                OR\n              </button>\n            </div>\n          }\n          <div class=\"gp-grid-filter-row\">\n            <select\n              [value]=\"cond.operator\"\n              (change)=\"onNumberOperatorChange(i, $any($event.target).value)\">\n              @for (op of numberOperators; track op.value) {\n                <option [value]=\"op.value\">{{ op.label }}</option>\n              }\n            </select>\n            @if (!isValueLessNumberOp(cond.operator)) {\n              <input\n                type=\"number\"\n                [value]=\"cond.value\"\n                (input)=\"cond.value = $any($event.target).value\"\n                placeholder=\"Value\" />\n              @if (cond.operator === 'between') {\n                <span class=\"gp-grid-filter-to\">to</span>\n                <input\n                  type=\"number\"\n                  [value]=\"cond.valueTo\"\n                  (input)=\"cond.valueTo = $any($event.target).value\"\n                  placeholder=\"Value\" />\n              }\n            }\n            @if (numberConditions.length > 1) {\n              <button\n                type=\"button\"\n                class=\"gp-grid-filter-remove\"\n                (click)=\"removeNumberCondition(i)\">\u00D7</button>\n            }\n          </div>\n        </div>\n      }\n      <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addNumberCondition()\">\n        + Add condition\n      </button>\n  } @else {\n      @if (showValuesMode()) {\n        <div class=\"gp-grid-filter-mode-toggle\">\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'values'\"\n            (click)=\"filterMode = 'values'\">\n            Values\n          </button>\n          <button\n            type=\"button\"\n            [class.active]=\"filterMode === 'condition'\"\n            (click)=\"filterMode = 'condition'\">\n            Condition\n          </button>\n        </div>\n      }\n\n      @if (filterMode === 'values' && showValuesMode()) {\n        <input\n          class=\"gp-grid-filter-search\"\n          type=\"text\"\n          [value]=\"searchText\"\n          (input)=\"searchText = $any($event.target).value\"\n          placeholder=\"Search...\" />\n        <div class=\"gp-grid-filter-actions\">\n          <button type=\"button\" (click)=\"selectAll()\">Select All</button>\n          <button type=\"button\" (click)=\"deselectAll()\">Deselect All</button>\n        </div>\n        <div class=\"gp-grid-filter-list\">\n          <label class=\"gp-grid-filter-option\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"includeBlanks\"\n              (change)=\"includeBlanks = $any($event.target).checked\" />\n            <span class=\"gp-grid-filter-blank\">(Blanks)</span>\n          </label>\n          @for (entry of filteredUniqueEntries(); track entry.key) {\n            <label class=\"gp-grid-filter-option\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedValues.has(entry.key)\"\n                (change)=\"toggleValue(entry.key, $any($event.target).checked)\" />\n              <span>{{ entry.label }}</span>\n            </label>\n          }\n        </div>\n      }\n\n      @if (filterMode === 'condition') {\n        @for (cond of textConditions; track $index; let i = $index) {\n          <div class=\"gp-grid-filter-condition\">\n            @if (i > 0) {\n              <div class=\"gp-grid-filter-combination\">\n                <button\n                  type=\"button\"\n                  [class.active]=\"textConditions[i - 1]?.nextOperator === 'and'\"\n                  (click)=\"setTextNextOp(i - 1, 'and')\">\n                  AND\n                </button>\n                <button\n                  type=\"button\"\n                  [class.active]=\"textConditions[i - 1]?.nextOperator === 'or'\"\n                  (click)=\"setTextNextOp(i - 1, 'or')\">\n                  OR\n                </button>\n              </div>\n            }\n            <div class=\"gp-grid-filter-row\">\n              <select\n                [value]=\"cond.operator\"\n                (change)=\"onTextOperatorChange(i, $any($event.target).value)\">\n                @for (op of textOperators; track op.value) {\n                  <option [value]=\"op.value\">{{ op.label }}</option>\n                }\n              </select>\n              @if (!isValueLessTextOp(cond.operator)) {\n                <input\n                  class=\"gp-grid-filter-text-input\"\n                  type=\"text\"\n                  [value]=\"cond.value\"\n                  (input)=\"cond.value = $any($event.target).value\"\n                  placeholder=\"Value\" />\n              }\n              @if (textConditions.length > 1) {\n                <button\n                  type=\"button\"\n                  class=\"gp-grid-filter-remove\"\n                  (click)=\"removeTextCondition(i)\">\u00D7</button>\n              }\n            </div>\n          </div>\n        }\n        <button type=\"button\" class=\"gp-grid-filter-add\" (click)=\"addTextCondition()\">\n          + Add condition\n        </button>\n      }\n  }\n\n    <div class=\"gp-grid-filter-buttons\">\n      <button type=\"button\" class=\"gp-grid-filter-btn-clear\" (click)=\"handleClear()\">\n        Clear\n      </button>\n      <button type=\"button\" class=\"gp-grid-filter-btn-apply\" (click)=\"handleApply()\">\n        Apply\n      </button>\n    </div>\n  </div>\n</div>\n", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gp-grid/angular",
   "description": "A high-performance Angular data grid component with virtual scrolling, cell selection, sorting, filtering, and Excel-like editing",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "license": "Apache-2.0",
   "module": "fesm2022/gp-grid-angular.mjs",
   "typings": "types/gp-grid-angular.d.ts",
@@ -51,7 +51,7 @@
     "@angular/core": ">=18.0.0"
   },
   "dependencies": {
-    "@gp-grid/core": "0.16.0",
+    "@gp-grid/core": "0.16.1",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

package/types/gp-grid-angular.d.ts

@@ -219,7 +219,8 @@ declare class FilterPopupComponent implements AfterViewInit, OnDestroy {
     private initFromCurrentFilter;
     private updatePosition;
     private onDocumentPointerDown;
-    private onWindowResize;
+    private repositionRafId;
+    private onWindowScrollOrResize;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterPopupComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterPopupComponent, "gp-grid-filter-popup", never, { "column": { "alias": "column"; "required": true; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": true; "isSignal": true; }; "anchorEl": { "alias": "anchorEl"; "required": true; "isSignal": true; }; "distinctValues": { "alias": "distinctValues"; "required": true; "isSignal": true; }; "currentFilter": { "alias": "currentFilter"; "required": false; "isSignal": true; }; }, { "apply": "apply"; "close": "close"; }, never, never, true, never>;
 }