@alaarab/ogrid-angular-primeng 2.1.10 → 2.1.12

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'"
@@ -793,14 +795,12 @@ DataGridTableComponent = __decorateClass([
         (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">
+              <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 +912,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)"
                       >
@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.1.10",
+  "version": "2.1.12",
   "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.12"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",