@alaarab/ogrid-angular-primeng 2.1.10 → 2.1.11

package/dist/esm/index.js

@@ -82,6 +82,8 @@ ColumnHeaderFilterComponent = __decorateClass([
             #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'"
@@ -471,16 +473,9 @@ var DataGridTableComponent = class extends BaseDataGridTableComponent {
     );
     this.tableWidthStyle = computed(() => {
       if (this.showEmptyInGrid()) return "100%";
-      if (this.allowOverflowX()) return "fit-content";
       if (this.layoutMode === "content") return "fit-content";
       return "100%";
     });
-    this.tableMinWidthStyle = computed(() => {
-      if (this.showEmptyInGrid()) return "100%";
-      if (this.allowOverflowX()) return "max-content";
-      if (this.layoutMode === "content") return "max-content";
-      return "100%";
-    });
     this.initBase();
   }
   ngOnChanges(changes) {
@@ -786,21 +781,19 @@ DataGridTableComponent = __decorateClass([
         [attr.aria-labelledby]="ariaLabelledBy()"
         [attr.data-empty]="showEmptyInGrid() ? 'true' : null"
         [attr.data-column-count]="state().layout.totalColCount"
-        [attr.data-overflow-x]="allowOverflowX() ? 'true' : 'false'"
+        [attr.data-suppress-scroll]="getProps()?.suppressHorizontalScroll ? 'true' : null"
         [attr.data-has-selection]="rowSelectionMode !== 'none' ? 'true' : null"
         (contextmenu)="$event.preventDefault()"
         (keydown)="onGridKeyDown($event)"
         (mousedown)="onWrapperMouseDown($event)"
         (scroll)="onWrapperScroll($event)"
         [style.--data-table-column-count]="state().layout.totalColCount"
-        [style.--data-table-width]="tableWidthStyle()"
-        [style.--data-table-min-width]="tableMinWidthStyle()"
         [style.--ogrid-row-height]="rowHeightCssVar()"
       >
         <div class="ogrid-table-wrapper">
           <div [class.loading-dimmed]="isLoading() && items().length > 0" class="ogrid-table-wrapper">
-            <div #tableContainer class="ogrid-table-wrapper">
-              <table class="ogrid-table">
+            <div #tableContainer class="ogrid-table-anchor">
+              <table class="ogrid-table" role="grid">
                 <thead [class]="stickyHeader() ? 'ogrid-thead ogrid-sticky-header' : 'ogrid-thead'">
                   @for (row of headerRows(); track $index; let rowIdx = $index) {
                     <tr>
@@ -912,6 +905,7 @@ DataGridTableComponent = __decorateClass([
                       @let isSelected = selectedRowIds().has(rowId);
                       <tr
                         [attr.data-row-id]="rowId"
+                        [attr.aria-selected]="isSelected || null"
                         [style.background]="isSelected ? 'var(--ogrid-selected-bg, #e8f0fe)' : null"
                         (click)="onRowClickPrimeng($event, item)"
                       >
@@ -1100,13 +1094,20 @@ DataGridTableComponent = __decorateClass([
       background: var(--ogrid-bg, #ffffff);
       color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
+    .ogrid-scroll-wrapper[data-suppress-scroll='true'] { overflow-x: hidden; }
     .ogrid-scroll-wrapper--loading-empty { min-height: 200px; }
     .ogrid-table-wrapper {
       position: relative;
     }
+    .ogrid-table-anchor {
+      position: relative;
+      width: max-content;
+      min-width: 100%;
+      overflow: clip;
+    }
     .ogrid-table {
-      width: var(--data-table-width, 100%);
-      min-width: var(--data-table-min-width, 100%);
+      width: 100%;
+      min-width: max-content;
       border-collapse: collapse;
       table-layout: fixed;
     }
@@ -1200,7 +1201,7 @@ DataGridTableComponent = __decorateClass([
       position: relative;
     }
     .ogrid-cell-content {
-      padding: 6px 10px;
+      padding: var(--ogrid-cell-padding, 6px 10px);
       min-height: 20px;
       cursor: default;
       overflow: hidden;
@@ -1212,7 +1213,7 @@ DataGridTableComponent = __decorateClass([
       outline: 2px solid var(--ogrid-selection-color, #217346); outline-offset: -1px;
       z-index: 2; position: relative; background: var(--ogrid-bg, #fff); overflow: visible; padding: 0;
     }
-    .ogrid-scroll-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important; }
+    .ogrid-scroll-wrapper [data-drag-range] { background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)); }
     .ogrid-fill-handle {
       position: absolute;
       bottom: -3px;
@@ -1362,35 +1363,36 @@ DataGridTableComponent = __decorateClass([
       outline-offset: 2px;
     }
 
-    /* PrimeNG Menu popup overrides \u2014 must use !important to win over PrimeNG's CSS-variable-based defaults */
-    .p-menu {
-      background: var(--ogrid-bg, #ffffff) !important;
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
-      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
-      border-radius: 4px !important;
-      padding: 4px 0 !important;
+    /* PrimeNG Menu popup overrides.
+       Double-class selectors (0,2,0) beat PrimeNG's single-class (0,1,0) defaults. */
+    .p-menu.p-menu {
+      background: var(--ogrid-bg, #ffffff);
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      border-radius: 4px;
+      padding: 4px 0;
     }
-    .p-menu-overlay {
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
+    .p-menu-overlay.p-menu-overlay {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--ogrid-border, rgba(0, 0, 0, 0.12));
     }
-    .p-menu-item-content {
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    .p-menu-item-content.p-menu-item-content {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .p-menu-item-link {
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
-      padding: 6px 12px !important;
+    .p-menu-item-link.p-menu-item-link {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      padding: 6px 12px;
     }
-    .p-menu-item-label {
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
-      font-size: 0.875rem !important;
+    .p-menu-item-label.p-menu-item-label {
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
+      font-size: 0.875rem;
     }
-    .p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
-      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
-      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87)) !important;
+    .p-menu-item:not(.p-disabled) .p-menu-item-content.p-menu-item-content:hover {
+      background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
+      color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
     }
-    .p-menu-separator {
-      border-color: var(--ogrid-border, rgba(0, 0, 0, 0.12)) !important;
-      margin: 4px 0 !important;
+    .p-menu-separator.p-menu-separator {
+      border-color: var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      margin: 4px 0;
     }
   `]
   })

package/dist/types/datagrid-table/datagrid-table.component.d.ts

@@ -90,7 +90,6 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     protected getTableContainerRef(): ElementRef<HTMLElement> | undefined;
     readonly resolvedAriaLabel: import("@angular/core").Signal<string | undefined>;
     readonly tableWidthStyle: import("@angular/core").Signal<"100%" | "fit-content">;
-    readonly tableMinWidthStyle: import("@angular/core").Signal<"100%" | "max-content">;
     getColumnWidth(col: IColumnDef<T>): number;
     trackByRowId(_index: number, item: T): RowId;
     onSelectAllChangePrimeng(checked: boolean): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "OGrid PrimeNG – PrimeNG Table-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.1.10"
+    "@alaarab/ogrid-angular": "2.1.11"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",