fix: add "frozen" class to all slick-pane for easier styling (#1089)

Author: ghiscoding

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;
     }
 

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;
     }
 

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 {

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>

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();
 

src/styles/slick-alpine-theme.scss

@@ -597,6 +597,7 @@
 }
 
 .slick-pane {
+  box-sizing: border-box;
   position: absolute;
   outline: 0;
   overflow: hidden;