From 967c9d8caeb05b636343f2e1181285177eb92722 Mon Sep 17 00:00:00 2001
From: "Ghislain B." <gbeaulac@gmail.com>
Date: Thu, 28 Nov 2024 01:26:32 -0500
Subject: [PATCH] fix: add "frozen" class to all slick-pane for easier styling
 (#1089)

---
 examples/example-auto-scroll-when-dragging.html |  5 +----
 examples/example-frozen-columns-and-rows.html   |  5 +----
 examples/example-frozen-columns-large.html      |  2 +-
 examples/example-frozen-columns.html            |  2 +-
 src/slick.grid.ts                               | 10 ++++++++++
 src/styles/slick-alpine-theme.scss              |  1 +
 6 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/examples/example-auto-scroll-when-dragging.html b/examples/example-auto-scroll-when-dragging.html
index 5089bcb3..1bd0ca60 100644
--- a/examples/example-auto-scroll-when-dragging.html
+++ b/examples/example-auto-scroll-when-dragging.html
@@ -23,10 +23,7 @@
     .slick-row:not(.slick-group) >.cell-unselectable {
       background: #efefef;
     }
-    .slick-row .slick-cell.frozen:last-child,
-    .slick-header-column.frozen:last-child,
-    .slick-headerrow-column.frozen:last-child,
-    .slick-footerrow-column.frozen:last-child {
+    .slick-pane.frozen {
       border-right: 1px solid red;
     }
 
diff --git a/examples/example-frozen-columns-and-rows.html b/examples/example-frozen-columns-and-rows.html
index c48e2115..0861076a 100644
--- a/examples/example-frozen-columns-and-rows.html
+++ b/examples/example-frozen-columns-and-rows.html
@@ -46,10 +46,7 @@
       box-sizing: border-box;
     }
 
-    .slick-row .slick-cell.frozen:last-child,
-    .slick-header-column.frozen:last-child,
-    .slick-headerrow-column.frozen:last-child,
-    .slick-footerrow-column.frozen:last-child {
+    .slick-pane.frozen {
       border-right: 1px solid #999;
     }
 
diff --git a/examples/example-frozen-columns-large.html b/examples/example-frozen-columns-large.html
index 87b122cd..f9a5adb8 100644
--- a/examples/example-frozen-columns-large.html
+++ b/examples/example-frozen-columns-large.html
@@ -31,7 +31,7 @@
       background-color: transparent; /* show default selected row background */
     }
 
-    .slick-cell.frozen:last-child, .slick-header-column.frozen:last-child {
+    .slick-pane.frozen {
       border-right: 1.5px dotted darkblue !important;
     }
     .options-panel {
diff --git a/examples/example-frozen-columns.html b/examples/example-frozen-columns.html
index 549d5289..dfa5ac15 100644
--- a/examples/example-frozen-columns.html
+++ b/examples/example-frozen-columns.html
@@ -31,7 +31,7 @@
       background-color: transparent; /* show default selected row background */
     }
 
-    .slick-cell.frozen:last-child, .slick-header-column.frozen:last-child {
+    .slick-pane.frozen {
       border-right: 1.5px dotted darkblue !important;
     }
   </style>
diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index dacbe74d..f82d5b8b 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -899,6 +899,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       }
 
       this.setFrozenOptions();
+      this.setPaneFrozenClasses();
       this.setPaneVisibility();
       this.setScroller();
       this.setOverflow();
@@ -2306,6 +2307,14 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     }
   }
 
+  /** add/remove frozen class to left headers/footer when defined */
+  protected setPaneFrozenClasses(): void {
+    const classAction = this.hasFrozenColumns() ? 'add' : 'remove';
+    for (const elm of [this._paneHeaderL, this._paneTopL, this._paneBottomL]) {
+      elm.classList[classAction]('frozen');
+    }
+  }
+
   protected setPaneVisibility() {
     if (this.hasFrozenColumns()) {
       Utils.show(this._paneHeaderR);
@@ -3580,6 +3589,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.updateColumnCaches();
 
     if (this.initialized) {
+      this.setPaneFrozenClasses();
       this.setPaneVisibility();
       this.setOverflow();
 
diff --git a/src/styles/slick-alpine-theme.scss b/src/styles/slick-alpine-theme.scss
index 7158c115..f8d6cbc2 100644
--- a/src/styles/slick-alpine-theme.scss
+++ b/src/styles/slick-alpine-theme.scss
@@ -597,6 +597,7 @@
 }
 
 .slick-pane {
+  box-sizing: border-box;
   position: absolute;
   outline: 0;
   overflow: hidden;